/* === GLOBAL CSS VARIABLES === */
/*
    Variable usage:
    var(--variable-name)
    Example:
    #sow-header {
        font-family: var(--font-primary);
        color: var(--color-primary);
        text-align: left;
        margin-bottom: 30px;
    }
*/
:root {

    /* =========================================================================
       RAW BRAND PALETTE
       Raw color values. Use semantic tokens below for new CSS.
       
       ! NOTICE ! Use these only when no semantic token fits.
       ========================================================================= */

    /* Blues */
    --color-primary: #1c0776;          /* brand primary — royal navy */
    --color-primary-light: #0e6adc;    /* profile borders, icons, mobile nav active */
    --color-primary-dark: #041b38;     /* heading text — darkest navy */
    --color-blue-action: #1870de;      /* interactive action blue — buttons, links, accents */
    --color-blue-border: #93c5fd;      /* light blue border — CTA banners */
    --color-blue-tint: #e8f0fb;        /* very light blue surface — service badges, CTA bg */

    /* Grays */
    --color-gray-light: #a5a5a5;       /* light gray */
    --color-gray-400: #9ca3af;         /* lighter gray — de-emphasized text on dark backgrounds */
    --color-gray-light-2: #d1d5db;     /* footer link text, muted text on dark surfaces */
    --color-gray-blue-light: #dde2ea;  /* light gray-blue */
    --color-gray-blue-calm: #e4e8ee;   /* calm blue — badges, borders, muted panels */
    --color-gray: #aca9a9;             /* mid gray */
    --color-gray-medium: #656565;      /* medium gray — muted/secondary text */
    --color-gray-dark: #403f3f;        /* dark gray — default body text */
    --color-gray-black: #212125;       /* near-black gray */

    /* Neutrals */
    --color-white: #ffffff;
    --color-off-white: #f5f5f5;        /* off-white — page background */

    --color-black: #000000;          /* pure black — no semantic role needed */

    /* Status */
    --color-success: #14ae5c;          /* success green */
    --color-success-teal: #1a9a6c;     /* workspace success accent — setup checklist checks */
    --color-info: #1579f6;             /* info blue */
    --color-warning: #f6c218;          /* warning yellow */
    --color-warning-amber: #c75c00;    /* blocker/warning amber — setup blockers */
    --color-error: #b3261e;            /* error red */
    --color-error-light: #facec3;      /* error light background */


    /* =========================================================================
       SEMANTIC TOKENS
       Describe what a color is *for*. Prefer these over raw palette values.
       ========================================================================= */

    /* --- Surfaces --- */
    --surface-page: var(--color-off-white);        /* body/page background */
    --surface-card: var(--color-white);            /* card and panel backgrounds */
    --surface-muted: var(--color-gray-blue-calm);  /* muted panels, notices, debug pane */
    --surface-action-subtle: #eef4ff;              /* subtle primary-tinted surface — workspace primary next-step card */

    /* --- Text --- */
    --text-default: var(--color-gray-dark);        /* default body text */
    --text-heading: var(--color-primary-dark);     /* headings and strong labels */
    --text-muted: var(--color-gray-medium);        /* secondary/muted text */
    --text-link: var(--color-blue-action);         /* interactive links */
    --text-inverse: var(--color-white);               /* primary text on dark/navy card surfaces */
    --text-inverse-muted: rgba(255, 255, 255, 0.70);  /* secondary/muted text on dark/navy card surfaces */

    /* --- Actions --- */
    --action-primary: var(--color-blue-action);         /* primary button/CTA background */
    --action-primary-hover: var(--color-primary);       /* primary button hover state */
    --action-primary-text: var(--color-white);          /* primary button label */
    --action-primary-shadow: rgba(24, 112, 222, 0.3);   /* primary button focus/hover shadow */
    --action-secondary-hover-bg: rgba(24, 112, 222, 0.06); /* ghost button hover tint */

    /* --- Borders / Dividers --- */
    --border-subtle: var(--color-gray-blue-calm);   /* section dividers and card borders */
    --border-input: var(--color-gray-blue-calm);    /* form input borders */
    --border-on-dark: rgba(255, 255, 255, 0.08);    /* subtle divider on dark/navy backgrounds */

    /* --- Chips / Badges --- */
    --chip-neutral-bg: var(--color-gray-blue-calm);    /* neutral chip/badge surface */
    --chip-neutral-text: var(--color-primary-dark);    /* neutral chip/badge text */
    --chip-action-bg: rgba(24, 112, 222, 0.12);        /* blue action chip tint */
    --chip-action-text: var(--action-primary);         /* blue action chip text */
    --chip-action-bg-sm: rgba(24, 112, 222, 0.10);     /* smaller tint — CTA pills */
    --chip-info-bg: #eef4ff;                           /* info/category pill background */
    --chip-info-text: #355ea8;                         /* info/category pill text */
    --chip-success-bg: #edf7ed;                        /* success/travel chip background */
    --chip-success-text: #2e6b2e;                      /* success/travel chip text */

    /* --- Status --- */
    --status-warning-color: var(--color-warning-amber);    /* blocker text and borders */
    --status-warning-bg: rgba(199, 92, 0, 0.10);           /* warning/blocker surface tint */
    --status-warning-bg-subtle: rgba(199, 92, 0, 0.04);    /* very subtle warning tint */
    --status-success-accent: var(--color-success-teal);    /* success check/accent color */

    /* --- Overlays / Shadows --- */
    --overlay-modal: rgba(0, 0, 0, 0.5);                     /* modal backdrop */
    --surface-hover: #f3f6fb;                                 /* subtle tint for interactive element hover states */
    --surface-overlay-light: rgba(255, 255, 255, 0.95);      /* near-opaque white overlay — mobile menu */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);          /* light resting shadow */


    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */

    --font-primary: "Poppins", sans-serif;
    --font-heading: "Montserrat", sans-serif;
    --font-size-h1: 48px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-body-lg: 18px;
    --font-size-body: 16px;
    --font-size-button: 16px;
    --font-size-small: 14px;
    --font-size-caption: 12px;

    --mw: 1120px;
    --r: 6px;
    
    /*
    Font sizing reference
    H1	          48px	  3em
    H2	          32px	  2em
    H3	          24px	  1.5em
    Body (lg)	    18px	  1.125em
    Body	        16px	  1em
    Button Text	  16px	  1em
    Small Text	  14px	  0.875em
    Caption	      12px	  0.75em
 */


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

    --waves-border-radius: 10px;
    --button-height-fat: 44px;
    --button-height-slim: 33px;

    /* Page shell / rail */
    --waves-rail-width: 320px;
    --waves-rail-gap: 24px;
    --waves-sticky-header-offset: 0px;   /* updated at runtime by js/page-shell.js */
    --waves-page-shell-max-width: 1400px;


    /* =========================================================================
       CARD / TILE SURFACE
       Default white-background card style shared across workspace modules,
       dashboard panels, and other Waves card-based UI surfaces.
       ========================================================================= */

    --waves-card-bg: var(--surface-card);
    --waves-card-radius: var(--waves-border-radius, 10px);
    --waves-card-shadow: 0 2px 8px rgba(28, 7, 118, 0.07);
    --waves-card-shadow-hover: 0 8px 24px rgba(28, 7, 118, 0.10);
    --waves-card-border: 1px solid var(--border-subtle);


    /* =========================================================================
       LEGACY ALIASES
       These semantic/role aliases exist in style.css for backwards compatibility.
       They are documented here so developers know where the shorthand vars come
       from and what they map to:

         --action-primary  → --action-primary      (#1870de)
         --color-primary  → --color-primary       (#1c0776)
         --color-primary-dark  → --color-primary-dark  (#041b38)
         --border-subtle  → --border-subtle       (#e4e8ee)
         --text-muted  → --text-muted          (#656565)
         --color-white  → --color-white         (#ffffff)

       The --color-text and --color-bg-page aliases below are kept for any
       remaining references in older templates.
       ========================================================================= */

    --color-text: var(--text-default);
    --color-text-light: var(--color-gray-light-2);
    --color-background: var(--surface-card);
    --color-bg-page: var(--surface-page);
}