/*
 * tokens.css — Vigilant Guardian design system tokens for web.
 *
 * Single source of truth for colors, typography, spacing, radii, shadows.
 * Every other CSS rule should reference these tokens, never literal values.
 *
 * Spec: ProjectManager/InProgress/WebRedesign/stitch_v2_flow_in_prod/
 *       vigilant_guardian/DESIGN.md (shared with iOS).
 *
 * Loaded BEFORE styles.css so the rest of the CSS can reference these
 * custom properties.
 */

/* Manrope via Google Fonts. font-display: swap avoids FOUT blocking. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

:root {
    /* ============================================================
     * COLORS — semantic tokens
     * ============================================================ */

    /* Surfaces — soft paper-like off-whites, not pure white */
    --surface:                        #F8F9FA;
    --surface-dim:                    #D9DADB;
    --surface-bright:                 #F8F9FA;
    --surface-container-lowest:       #FFFFFF;
    --surface-container-low:          #F3F4F5;
    --surface-container:              #EDEEEF;
    --surface-container-high:         #E7E8E9;
    --surface-container-highest:      #E1E3E4;
    --surface-variant:                #E1E3E4;
    --background:                     #F8F9FA;
    --card:                           #FFFFFF;
    --card-border:                    #E9ECEF;

    /* Text on surfaces */
    --on-surface:                     #191C1D;
    --on-surface-variant:             #434654;
    --on-background:                  #191C1D;
    --outline:                        #737685;
    --outline-variant:                #C3C6D6;

    /* Inverse (dark) */
    --inverse-surface:                #2E3132;
    --inverse-on-surface:             #F0F1F2;

    /* Primary — Institutional Blue (Analyze, educational CTAs) */
    --primary:                        #003D9B;
    --primary-container:              #0052CC;
    --on-primary:                     #FFFFFF;
    --on-primary-container:           #C4D2FF;
    --primary-tint:                   #E6F0FF;
    --primary-fixed:                  #DAE2FF;
    --primary-fixed-dim:              #B2C5FF;
    --on-primary-fixed:               #001848;
    --on-primary-fixed-variant:       #0040A2;
    --inverse-primary:                #B2C5FF;
    --surface-tint:                   #0C56D0;

    /* Secondary — Warning Gold (Medium severity, cautionary) */
    --secondary:                      #8A5100;
    --secondary-container:            #FE9800;
    --on-secondary:                   #FFFFFF;
    --on-secondary-container:         #643900;
    --secondary-fixed:                #FFDCBD;
    --secondary-fixed-dim:            #FFB86F;
    --on-secondary-fixed:             #2C1600;
    --on-secondary-fixed-variant:     #693C00;

    /* Tertiary — Alert Red (High severity, Ignore/Delete CTA) */
    --tertiary:                       #8C000E;
    --tertiary-container:             #B4151D;
    --on-tertiary:                    #FFFFFF;
    --on-tertiary-container:          #FFC5BF;
    --tertiary-fixed:                 #FFDAD6;
    --tertiary-fixed-dim:             #FFB3AC;
    --on-tertiary-fixed:              #410003;
    --on-tertiary-fixed-variant:      #930010;

    /* Error */
    --error:                          #BA1A1A;
    --error-container:                #FFDAD6;
    --on-error:                       #FFFFFF;
    --on-error-container:             #93000A;

    /* Danger CTA — definitive Ignore/Delete red per design system spec */
    --danger:                         #EB5757;

    /* Accent — Tab/active highlight */
    --tab-active:                     #FE9800;

    /* Severity aliases (semantic) */
    --severity-high:                  var(--tertiary-container);   /* #B4151D */
    --severity-medium:                var(--secondary-container);  /* #FE9800 */
    --severity-low:                   #EAB308;

    /* ============================================================
     * TYPOGRAPHY — type scale (Manrope)
     * ============================================================ */

    --font-family:                    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --display-size:                   32px;
    --display-weight:                 800;
    --display-line:                   40px;
    --display-tracking:               -0.02em;

    --headline-lg-size:               24px;
    --headline-lg-weight:             700;
    --headline-lg-line:               32px;

    --headline-md-size:               20px;
    --headline-md-weight:             700;
    --headline-md-line:               28px;

    --body-lg-size:                   18px;
    --body-lg-weight:                 400;
    --body-lg-line:                   28px;

    --body-md-size:                   16px;
    --body-md-weight:                 400;
    --body-md-line:                   24px;

    --label-bold-size:                14px;
    --label-bold-weight:              700;
    --label-bold-line:                20px;
    --label-bold-tracking:            0.05em;

    --label-sm-size:                  12px;
    --label-sm-weight:                500;
    --label-sm-line:                  16px;

    /* ============================================================
     * SPACING — 8pt grid, base 4px
     * ============================================================ */

    --space-xs:                       4px;
    --space-sm:                       8px;
    --space-md:                       16px;
    --space-lg:                       24px;
    --space-xl:                       32px;
    --space-2xl:                      48px;
    --space-page-margin:              20px;

    /* ============================================================
     * RADIUS
     * ============================================================ */

    --radius-sm:                      4px;
    --radius-default:                 8px;     /* buttons, inputs */
    --radius-md:                      12px;
    --radius-lg:                      16px;
    --radius-card:                    16px;    /* cards, risk modules */
    --radius-xl:                      24px;
    --radius-pill:                    9999px;  /* severity badges, pills */

    /* ============================================================
     * ELEVATION
     * ============================================================ */

    /* Soft shadow — used sparingly per spec (only primary CTAs and
     * risk-detail cards). Everything else uses tonal layering. */
    --shadow-soft:                    0px 4px 12px rgba(0, 0, 0, 0.05);

    /* ============================================================
     * MOTION
     * ============================================================ */

    --transition-fast:                120ms ease;
    --transition-default:             200ms ease;
    --transition-slow:                300ms ease;

    /* ============================================================
     * LAYOUT
     * ============================================================ */

    --content-max-width:              1280px;
    --sidebar-width:                  240px;
    --topnav-height:                  64px;
    --footer-height:                  80px;
}

/* ============================================================
 * BASE RESETS + BODY TYPOGRAPHY
 * ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--body-md-size);
    line-height: var(--body-md-line);
    color: var(--on-surface);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset button defaults — buttons get full styling from token-based rules */
button {
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

a {
    color: var(--primary-container);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Reduced-motion users get gentler transitions */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * TYPE STYLE UTILITIES — reference these from any element
 * ============================================================ */

.t-display {
    font-size: var(--display-size);
    font-weight: var(--display-weight);
    line-height: var(--display-line);
    letter-spacing: var(--display-tracking);
}

.t-headline-lg {
    font-size: var(--headline-lg-size);
    font-weight: var(--headline-lg-weight);
    line-height: var(--headline-lg-line);
}

.t-headline-md {
    font-size: var(--headline-md-size);
    font-weight: var(--headline-md-weight);
    line-height: var(--headline-md-line);
}

.t-body-lg {
    font-size: var(--body-lg-size);
    font-weight: var(--body-lg-weight);
    line-height: var(--body-lg-line);
}

.t-body-md {
    font-size: var(--body-md-size);
    font-weight: var(--body-md-weight);
    line-height: var(--body-md-line);
}

.t-label-bold {
    font-size: var(--label-bold-size);
    font-weight: var(--label-bold-weight);
    line-height: var(--label-bold-line);
    letter-spacing: var(--label-bold-tracking);
}

.t-label-sm {
    font-size: var(--label-sm-size);
    font-weight: var(--label-sm-weight);
    line-height: var(--label-sm-line);
}