/***********************************************************************
 * File: style.css
 * Module: Design System
 * Purpose:
 * Defines the core visual identity for the AI Governance application.
 * This file establishes typography, colours, spacing and global
 * design variables used throughout the product.
 *
 * Dependencies:
 * None
 *
 * Technical Notes:
 * - Forms the foundation of the AI Governance Design System.
 * - Layouts and components inherit from these variables.
 *
 * Future Enhancements:
 * - Dark Mode
 * - High Contrast Mode
 * - Theme Switching
 *
 * Build:
 * AI Governance Build 2 MVP/V1
 *
 * Version:
 * 2.0.0
 ***********************************************************************/


/* ===========================================================
   CSS VARIABLES
   =========================================================== */

:root {

    /* Brand Colours */

    --ag-primary: #1F3A5F;
    --ag-secondary: #4E5D6C;
    --ag-accent: #2E8B8B;

    /* Status Colours */

    --ag-success: #2E7D32;
    --ag-warning: #F9A825;
    --ag-danger:  #C62828;

    /* Neutral Colours */

    --ag-background: #F7F8FA;
    --ag-surface:    #FFFFFF;
    --ag-border:     #D8DEE5;

    --ag-text:       #2B2B2B;
    --ag-text-light: #666666;

    /* Typography */

    --ag-font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    --ag-font-size: 18px;

    --ag-line-height: 1.6;

    /* Layout */

    --ag-radius: 6px;

    --ag-shadow:
        0 2px 6px rgba(0,0,0,0.08);

    --ag-max-width: 1200px;

    /* Standard Spacing */

    --ag-space-xs: 0.25rem;
    --ag-space-sm: 0.50rem;
    --ag-space-md: 1rem;
    --ag-space-lg: 2rem;
    --ag-space-xl: 3rem;

}


/* ===========================================================
   GLOBAL RESET
   =========================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


/* ===========================================================
   BODY
   =========================================================== */

body {

    font-family: var(--ag-font-family);

    font-size: var(--ag-font-size);

    line-height: var(--ag-line-height);

    background: var(--ag-background);

    color: var(--ag-text);

}


/* ===========================================================
   HEADINGS
   =========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--ag-primary);

    font-weight: 600;

    margin-bottom: var(--ag-space-md);

}

h1 {

    font-size: 2rem;

}

h2 {

    font-size: 1.6rem;

}

h3 {

    font-size: 1.3rem;

}


/* ===========================================================
   PARAGRAPHS
   =========================================================== */

p {

    margin-bottom: var(--ag-space-md);

}


/* ===========================================================
   LINKS
   =========================================================== */

a {

    color: var(--ag-primary);

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}


/* ===========================================================
   LISTS
   =========================================================== */

ul,
ol {

    margin-left: var(--ag-space-lg);

    margin-bottom: var(--ag-space-md);

}


/* ===========================================================
   IMAGES
   =========================================================== */

img {

    max-width: 100%;

    height: auto;

}


/* ===========================================================
   HORIZONTAL RULE
   =========================================================== */

hr {

    border: 0;

    border-top: 1px solid var(--ag-border);

    margin: var(--ag-space-lg) 0;

}


/* ===========================================================
   TEXT UTILITIES
   =========================================================== */

.ag-text-centre {

    text-align: center;

}

.ag-text-right {

    text-align: right;

}

.ag-muted {

    color: var(--ag-text-light);

}


/* ===========================================================
   VISIBILITY
   =========================================================== */

.ag-hidden {

    display: none;

}

/*==============================================================
  Form Input
==============================================================*/

.ag-input {

    display: block;

    width: 100%;

    padding: 12px 14px;

    font-size: 1rem;

    font-family: inherit;

    color: #1f2937;

    background: #ffffff;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    box-sizing: border-box;

    transition: border-color 0.2s ease;

}

.ag-input:focus {

    outline: none;

    border-color: #1d4e89;

    box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.15);

}

/*==============================================================
  Form Group
==============================================================*/

.ag-form-group {

    margin-bottom: 24px;

}

.ag-form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #1f2937;

}

/* =========================================================
   B-READY BRAND
========================================================= */

.b-ready-brand {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: Arial, Helvetica, sans-serif;
}

.b-ready-name {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}

.b-ready-b {
    font-weight: 700;
    font-size: 2rem;
    color: #1e3a5f;
}

.b-ready-rest {
    font-weight: 300;
    font-size: 2rem;
    color: #1e3a5f;
    letter-spacing: 0.01em;
}

.b-ready-tagline {
    font-weight: 300;
    font-size: 0.75rem;
    color: #1e3a5f;
    margin-top: 5px;
    line-height: 1.2;
}

.b-ready-brand:hover {
    text-decoration: none;
}

/* =========================================================
   B-READY BRAND TEST
   Must appear after existing navigation styles
========================================================= */

.ag-nav-brand .b-ready-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.ag-nav-brand .b-ready-name {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.ag-nav-brand .b-ready-b {
    font-weight: 800;
    font-size: 2.5rem;
}

.ag-nav-brand .b-ready-rest {
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 0.01em;
}

.ag-nav-brand .b-ready-tagline {
    display: block;
    font-weight: 200;
    font-size: 1.0rem;
    margin-top: 5px;
    line-height: 1.2;
}

.ag-nav-brand .b-ready-brand:hover {
    text-decoration: none;
}