/*
 * tokens.css — THE SINGLE SOURCE OF TRUTH
 * ----------------------------------------
 * Every color, font, spacing, radius, and breakpoint in the entire site
 * comes from a CSS variable defined here. Change any value below and the
 * whole site updates on next page load.
 *
 * Naming: --<category>-<role>-<variant?>
 * (e.g., --color-primary, --space-2, --radius-md)
 */

:root {

  /* =====================================================================
     1. COLORS — US Flag palette
     ===================================================================== */

  /* Brand */
  --color-primary:           #002868;  /* Navy — primary brand */
  --color-secondary:         #111827;  /* Near-black */
  --color-accent:            #BF0A30;  /* US flag red — CTAs, highlights */
  --color-accent-hover:      #A50826;  /* Darker red for hover */
  --color-star:              #F59E0B;  /* Amber — reserved for star ratings, "featured" */
  --color-score-fill:        #3B82F6;  /* Friendly bright blue — progress bars, score visuals */

  /* === Tag / Badge palette ===
     Soft secondary colors used ONLY for tags + ownership badges.
     Don't use these as primary brand colors elsewhere — they're informational. */

  /* Uniform program-tag color (used for "Computer Science", "Business" pills, etc.) */
  --color-tag-bg:            #F1F5F9;  /* soft gray-blue */
  --color-tag-text:          #334155;  /* dark slate */

  /* PUBLIC ownership (institutional / government feel) */
  --color-tag-public-bg:     #DBEAFE;  /* light blue */
  --color-tag-public-text:   #1E40AF;  /* dark blue */

  /* PRIVATE NON-PROFIT (educational warmth / growth) */
  --color-tag-nonprofit-bg:  #DCFCE7;  /* light green */
  --color-tag-nonprofit-text:#15803D;  /* dark green */

  /* PRIVATE FOR-PROFIT (neutral with a slight cautionary lean) */
  --color-tag-forprofit-bg:  #FEF3C7;  /* light amber */
  --color-tag-forprofit-text:#92400E;  /* dark amber */

  /* === Major category palette ===
     Six colors, one per major category. Each has TWO forms:
       --color-cat-X        : solid fill (could power a bold variant in future)
       --color-cat-X-bg/text: soft pair — bg seeds the major card's gradient,
                              text colors the category label + footer badges */

  /* STEM — Navy (primary brand) */
  --color-cat-stem:           #002868;
  --color-cat-stem-bg:        #DBEAFE;
  --color-cat-stem-text:      #1E40AF;

  /* HEALTH — Teal */
  --color-cat-health:         #14B8A6;
  --color-cat-health-bg:      #CCFBF1;
  --color-cat-health-text:    #115E59;

  /* BUSINESS — Light green */
  --color-cat-business:       #B5E18B;
  --color-cat-business-bg:    #DCFCE7;
  --color-cat-business-text:  #15803D;

  /* HUMANITIES — Light lavender */
  --color-cat-humanities:     #D69ADE;
  --color-cat-humanities-bg:  #F3E8FF;
  --color-cat-humanities-text:#6B21A8;

  /* SOCIAL STUDIES — Soft yellow */
  --color-cat-social:         #F4D35E;
  --color-cat-social-bg:      #FEF3C7;
  --color-cat-social-text:    #92400E;

  /* TRADES — Red */
  --color-cat-trades:         #BF0A30;
  --color-cat-trades-bg:      #FEE2E2;
  --color-cat-trades-text:    #991B1B;

  /* === RIASEC interest palette ===
     6 colors for Holland's RIASEC career-interest codes (career profile).
     Distinct from the major-category palette — these tag personality fit,
     not field of study. Two reuse existing tokens (S→success, E→star) to
     keep the palette to 4 net-new colors. */
  --color-riasec-r:           #6366F1;  /* Realistic    — indigo */
  --color-riasec-i:           #0EA5E9;  /* Investigative — sky blue */
  --color-riasec-a:           #EC4899;  /* Artistic     — pink */
  --color-riasec-c:           #8B5CF6;  /* Conventional — purple */

  /* Text */
  --color-text:              #1F2937;  /* Body text */
  --color-text-secondary:    #374151;  /* De-emphasised text, one step lighter than body */
  --color-text-muted:        #6B7280;  /* Secondary / labels */
  --color-text-on-primary:   #FFFFFF;  /* Text on navy backgrounds */
  --color-text-on-accent:    #FFFFFF;  /* Text on red backgrounds */

  /* Surfaces */
  --color-white:             #FFFFFF;
  --color-black:             #000000;
  --color-offwhite:          #F7F7F7;  /* Subtle background */
  --color-card-bg:           #FEFCFD;  /* Warm off-white card surface */
  --color-surface:           var(--color-card-bg);  /* Default component surface — alias for card-bg */
  --color-surface-alt:       #F8FAFC;  /* Alternate surface: hover rows, table headers, tinted notes */
  --color-card-major-grad:   #FAFAFA;  /* Top-of-card tint for the major-card gradient */
  --color-card-program-grad: #FAFAF8;  /* Top-of-card tint for the program-card gradient */
  --color-card-career-bg:    #FFFDFA;  /* Solid warm off-white background for the career card */
  --color-footer-bg:         #F3F3F3;  /* Footer background */
  --color-border:            #DDDDDD;  /* Subtle borders — used on every card */
  --color-border-strong:     #E5E7EB;  /* Stronger dividers */

  /* Status (rare use, but defined for future) */
  --color-success:           #10B981;
  --color-roi-earn:          #0F7B6C;          /* teal gradient endpoint — ROI earnings bar */
  --color-warning:           #F59E0B;
  --color-error:             #DC2626;

  /* ROI badge colors — Career Outcomes table */
  --color-roi-excellent-bg:   #D1FAE5;
  --color-roi-excellent-text: #065F46;
  --color-roi-strong-bg:      #DBEAFE;
  --color-roi-strong-text:    #1E40AF;
  --color-roi-good-bg:        #FEF3C7;
  --color-roi-good-text:      #92400E;
  --color-roi-average-bg:     #F3F4F6;
  --color-roi-average-text:   #374151;

  /* === Tier ramp — 6-step green→red status scale ===
     Soft background + dark text pairs. Powers the admission-difficulty and
     UCD-score label badges (college card, profile, Compare, Methodology). */
  --color-tier-1-bg:   #D1FAE5;  --color-tier-1-text: #065F46;  /* green  — best */
  --color-tier-2-bg:   #DCFCE7;  --color-tier-2-text: #15803D;  /* light green */
  --color-tier-3-bg:   #ECFCCB;  --color-tier-3-text: #4D7C0F;  /* lime */
  --color-tier-4-bg:   #FEF9C3;  --color-tier-4-text: #854D0E;  /* yellow */
  --color-tier-5-bg:   #FFEDD5;  --color-tier-5-text: #9A3412;  /* orange */
  --color-tier-6-bg:   #FEE2E2;  --color-tier-6-text: #991B1B;  /* red    — lowest */

  /* Hidden gem badge */
  --color-gem-badge-bg:       #FFF7ED;
  --color-gem-badge-text:     #C2410C;

  /* Callout amber text — specialty notice boxes */
  --color-callout-amber-text:     #78350F;

  /* Sidebar stat accent — positive/negative values on dark navy sidebars */
  --color-stat-positive-on-dark:  #6EE7B7;  /* emerald-300 */
  --color-stat-negative-on-dark:  #FCA5A5;  /* rose-300 */

  /* === Hero gradient stops (used by .archive-hero) ===
     Top is darker than --color-primary; bottom is lighter. The middle stop
     equals --color-primary so the hero feels "of the brand" not bolted-on. */
  --color-hero-grad-top:        #001A4A;
  --color-hero-grad-mid:        #002868;            /* same as --color-primary */
  --color-hero-grad-bottom:     #003A8A;

  /* === Surfaces + text on dark backgrounds (hero) ===
     Layered alpha-white values for the dark hero. Naming = "where" not
     "what color" so the same scheme works on any future dark surface. */
  --color-on-dark-grid:           rgba(255, 255, 255, 0.04);  /* blueprint grid */
  --color-on-dark-surface:        rgba(255, 255, 255, 0.06);  /* badge / button bg */
  --color-on-dark-surface-hover:  rgba(255, 255, 255, 0.14);  /* hover bg */
  --color-on-dark-border:         rgba(255, 255, 255, 0.14);  /* badge border */
  --color-on-dark-border-strong:  rgba(255, 255, 255, 0.18);  /* button border */
  --color-on-dark-border-soft:    rgba(255, 255, 255, 0.20);  /* pill border on dark bg */
  --color-on-dark-divider:        rgba(255, 255, 255, 0.12);  /* stat divider lines */
  --color-on-dark-surface-dim:    rgba(255, 255, 255, 0.15);  /* category bg / sidebar dividers */
  --color-on-dark-border-muted:   rgba(255, 255, 255, 0.40);  /* CTA / button border on dark */
  --color-on-dark-text-bright:    rgba(255, 255, 255, 0.88);  /* heading on dark */
  --color-on-dark-text-strong:    rgba(255, 255, 255, 0.78);  /* primary text */
  --color-on-dark-text-medium:    rgba(255, 255, 255, 0.70);  /* link / secondary */
  --color-on-dark-text-soft:      rgba(255, 255, 255, 0.65);  /* tertiary */
  --color-on-dark-text-dim:       rgba(255, 255, 255, 0.60);  /* secondary label */
  --color-on-dark-text-faint:     rgba(255, 255, 255, 0.45);  /* dividers / chevrons */
  --color-on-dark-underline:      rgba(255, 255, 255, 0.50);  /* text-decoration on dark hero links */

  /* Primary-tinted overlays — rgba(0,40,104,x) for charts, dot-plots, focus rings */
  --color-primary-ghost:          rgba(0, 40, 104, 0.05);   /* barely-there row highlight */
  --color-primary-ring:           rgba(0, 40, 104, 0.10);   /* focus ring / marker halo */
  --color-primary-track:          rgba(0, 40, 104, 0.14);   /* chart track line */
  --color-primary-dot-shadow:     rgba(0, 40, 104, 0.25);   /* dot-plot dot shadow */
  --color-primary-bar-fade:       rgba(0, 40, 104, 0.40);   /* gradient fade-out endpoint */

  /* Halo glow around success indicator dot */
  --color-success-halo:           rgba(16, 185, 129, 0.18);

  /* === Growth-pill colors (used by major/program/career card "+X.X%" pills) === */
  --color-pill-positive-bg:       rgba(16, 185, 129, 0.16);   /* soft green tint */
  --color-pill-positive-text:     var(--color-cat-business-text);  /* dark green #15803D */
  --color-pill-negative-bg:       rgba(220, 38, 38, 0.12);    /* soft red tint */
  --color-pill-negative-text:     var(--color-cat-trades-text);    /* dark red #991B1B */

  /* === Subtle dividers + tracks (alpha-black overlays on light surfaces) ===
     Used for footer dividers inside cards, progress-bar tracks, and
     credential-bar track backgrounds. */
  --color-divider-soft:           rgba(0, 0, 0, 0.04);  /* track bg behind tiny segments */
  --color-divider:                rgba(0, 0, 0, 0.06);  /* default subtle divider on tinted bg */
  --color-divider-medium:         rgba(0, 0, 0, 0.10);  /* slightly stronger — light card bgs */
  --color-divider-strong:         rgba(0, 0, 0, 0.12);  /* visible divider on light card bgs */

  /* Trades-bg one shade darker — used by .archive-chip--clear:hover */
  --color-cat-trades-bg-hover:    #FECACA;

  /* Soft drop shadow for floating UI (autocomplete, popovers) */
  --shadow-dropdown:              0 6px 16px rgba(17, 24, 39, 0.08);

  /* Accent halo — layered red rings around the dot plot's "current" dot
     (rgba stops of --color-accent #BF0A30). */
  --shadow-accent-halo:           0 0 0 3px rgba(191, 10, 48, 0.15),
                                  0 0 0 6px rgba(191, 10, 48, 0.07),
                                  0 2px 6px rgba(191, 10, 48, 0.3);

  /* Soft cream — pale warm-yellow surface, used as the homepage marquee background */
  --color-cream:                  #FFFEE7;

  /* Lavender — soft cool off-white surface (faint lilac). Used by the header
     mega-menu left column. */
  --color-lavender:               #FBF7FF;
  /* Lavender deep — one visible step darker than --color-lavender. Used by the
     mobile nav drawer: the open section's heading row + expanded panel share
     this surface so they read as one card against the white drawer. */
  --color-lavender-deep:          #F2E8FC;

  /* Warm tint — faintest pink, used by the guide Key Takeaways block to
     visually anchor the bullet list above the article body. */
  --color-warmtint:               #FFF5F5;
  /* Cool tint — faint mint, the Findings counterpart to warmtint, so findings
     read visually distinct from guides at a glance. */
  --color-cooltint:               #EDFEFA;

  /* Trust card bg — soft warm-neutral surface, used by the homepage trust-inline block */
  --color-trust-bg:               #E1E1CF;

  /* === Image-card overlay gradient stops (shared) ===
     Dark scrim over photo cards so white text stays readable. Used by the
     state cards, the Continue Exploring (.profile-explore) cards, and any
     future image card. g* = resting stops (bottom → top), gh* = hover. */
  --color-img-overlay-g0:   rgba(0, 0, 0, 0.88);  /* bottom */
  --color-img-overlay-g35:  rgba(0, 0, 0, 0.65);
  --color-img-overlay-g70:  rgba(0, 0, 0, 0.30);
  --color-img-overlay-g100: rgba(0, 0, 0, 0.10);  /* top */
  --color-img-overlay-gh0:  rgba(0, 0, 0, 0.92);  /* hover stops */
  --color-img-overlay-gh40: rgba(0, 0, 0, 0.70);
  --color-img-overlay-gh75: rgba(0, 0, 0, 0.35);
  --color-img-overlay-gh100: rgba(0, 0, 0, 0.15);

  /* === State vertical — hero overlay === */
  --color-state-hero-overlay:      rgba(0, 0, 0, 0.52);  /* full-bleed hero overlay */
  --state-hero-min-height:         400px;                 /* mobile */
  --state-hero-min-height-desktop: 500px;                 /* desktop */

  /* === CTA button dimensions ===
     Single source of truth for all small CTA buttons (card "View Profile",
     hero quick-filter buttons, header "Compare", etc.). Change once here
     and every CTA on the site updates together — no risk of buttons drifting
     to slightly different sizes as the project grows. */
  --btn-padding-y:                10px;         /* base .btn vertical padding */
  --cta-padding-y:                6px;          /* default vertical padding */
  --cta-padding-x:                14px;         /* default horizontal padding */
  --cta-padding-y-lg:             7px;          /* slightly bigger — desktop header CTA */
  --cta-padding-x-lg:             16px;

  /* === Pagination cells === */
  --pagination-cell-size:         36px;         /* min-width + height of every cell (desktop) */
  --pagination-cell-min-mobile:   32px;         /* tighter on mobile so 9 cells fit one line */

  /* === Other commonly-reused component tokens === */
  --border-width:                 1px;          /* default border width — cards, dividers */
  --border-width-strong:          2px;          /* total-row dividers, chart median markers */

  /* Icon sizes — small, default, medium, large, extra-large.
     Used across navigation, cards, tiles, chart legends, and section
     icons. Pick the closest size; don't introduce a one-off raw value. */
  --icon-size-sm:                 14px;         /* small inline (search, chevrons) */
  --icon-size:                    16px;         /* default body icon */
  --icon-size-md:                 18px;         /* tile-head icons (Student Life) */
  --icon-size-lg:                 22px;         /* meta-row icons (About) */
  --icon-size-xl:                 28px;         /* CTA icon, large stat-card */

  /* Chart geometry — donut diameter + horizontal-bar track heights.
     Centralizing these keeps charts visually consistent across the site
     (the same bar thickness, the same donut size from page to page). */
  --chart-donut-size:             220px;        /* race + debt donuts */
  --chart-debt-columns-height:    240px;        /* vertical bar chart shell */
  --chart-debt-column-max-w:      64px;         /* individual bar max width */
  --chart-bar-track:               8px;         /* default progress-bar height */
  --chart-bar-track-sm:            6px;         /* thinner score-bar variant */
  --chart-bar-track-lg:           14px;         /* income-bar fat track */

  /* SVG chart text — tiny labels for axis ticks and percentile names.
     11px sits between font-size-2xs (10) and font-size-xs (12) — used
     for chart-internal text where 12 is too big and 10 too cramped. */
  --font-size-tiny:               11px;

  /* Mega number — overall UCD score and similar single-glyph displays
     where the value needs to be larger than the type-scale max (5xl). */
  --font-size-mega:               64px;


  /* =====================================================================
     2. TYPOGRAPHY — Prompt (self-hosted, weights 300/400/500)
     ===================================================================== */

  --font-family:             "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono:        ui-monospace, SFMono-Regular, Consolas, monospace;

  --font-weight-light:       300;
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;          /* H1 only */

  /* Type scale (modular, mobile-first values; bumped slightly on desktop in base.css) */
  --font-size-3xs:           8px;           /* micro — pill notes */
  --font-size-2xs:           10px;          /* tiny — uppercase labels, badges */
  --font-size-xs:            12px;          /* small caption / tag */
  --font-size-sm:            14px;          /* secondary text, links */
  --font-size-base:          16px;          /* body */
  --font-size-lg:            18px;          /* emphasized body, h4 */
  --font-size-xl:            20px;          /* h3 */
  --font-size-card-hero:     22px;          /* card hero numbers (e.g. career wage) */
  --font-size-2xl:           24px;          /* h2 */
  --font-size-3xl:           30px;          /* h1 mobile */
  --font-size-4xl:           36px;          /* h1 tablet, large numbers */
  --font-size-5xl:           48px;          /* h1 desktop */

  /* Line-height scale — covers every line-height used across the site.
     Names map to use cases, not abstract sizes, so picking the right one is intuitive. */
  --line-height-none:        1;        /* icons, single-line ui */
  --line-height-display:     1.1;      /* large hero numbers / headlines (also used for 1.05) */
  --line-height-tight:       1.2;      /* large headings */
  --line-height-snug:        1.25;     /* card titles */
  --line-height-base:        1.3;      /* most body text */
  --line-height-comfortable: 1.35;     /* checkboxes, dropdown items */
  --line-height-button:      1.4;      /* button text + small uppercase labels */
  --line-height-normal:      1.5;      /* body paragraphs */
  --line-height-prose:       1.6;      /* hero subtitle / long-form */
  --line-height-relaxed:     1.7;      /* extra-airy paragraphs */

  /* Letter-spacing scale — same logic, named by use case. */
  --letter-spacing-tight:        -0.01em;     /* large display headings */
  --letter-spacing-subtle:       -0.005em;    /* tabular numbers */
  --letter-spacing-normal:       0;
  --letter-spacing-wide:         0.04em;      /* small caps body */
  --letter-spacing-wider:        0.06em;      /* small uppercase labels (10–12px) */
  --letter-spacing-widest:       0.08em;      /* breadcrumb-style caps */
  --letter-spacing-uppercase:    0.1em;       /* trust badge / quiet captions */
  --letter-spacing-uppercase-lg: 0.12em;      /* "FILTERS" / strong section caps */


  /* =====================================================================
     3. SPACING — 4px grid
     ===================================================================== */

  --space-0:                 0;
  --space-px:                1px;   /* hairline / icon borders */
  --space-0-5:               2px;   /* tight micro-gap */
  --space-0-75:              3px;   /* pill vertical padding */
  --space-1:                 4px;
  --space-1-5:               6px;   /* compact gap — between space-1 and space-2 */
  --space-2:                 8px;
  --space-2-5:               10px;  /* medium compact — between space-2 and space-3 */
  --space-3:                 12px;
  --space-3-5:               14px;  /* sort/select padding */
  --space-4:                 16px;
  --space-4-5:               18px;  /* hero section side padding */
  --space-5:                 20px;
  --space-6:                 24px;
  --space-7:                 28px;  /* fills the 24->32 gap; e.g. desktop grid gaps */
  --space-8:                 32px;
  --space-10:                40px;
  --space-12:                48px;
  --space-12-5:              50px;  /* hero section bottom padding */
  --space-16:                64px;
  --space-20:                80px;
  --space-24:                96px;


  /* =====================================================================
     4. RADIUS, SHADOWS, TRANSITIONS
     ===================================================================== */

  --radius-sm:               1px;
  --radius-md:               4px;       /* default for buttons + cards (per brand spec) */
  --radius-lg:               8px;
  --radius-xl:               12px;
  --radius-full:             9999px;
  --radius-card:             var(--radius-lg);  /* standard card border-radius (8px) */

  --shadow-sm:               0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:               0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -2px rgba(17, 24, 39, 0.05);
  --shadow-lg:               0 10px 15px -3px rgba(17, 24, 39, 0.1), 0 4px 6px -4px rgba(17, 24, 39, 0.05);
  --text-shadow-on-img:      0 1px 6px rgba(0, 0, 0, 0.85);

  --transition-fast:         150ms ease;
  --transition-base:         200ms ease;
  --transition-slow:         350ms ease;

  --opacity-disabled:        0.45;


  /* =====================================================================
     5. LAYOUT — container widths, breakpoints
     ===================================================================== */

  --container-max-width:     1300px;     /* Caps content width on big screens */
  --container-padding-x:     16px;       /* Mobile default — overridden per breakpoint in layout.css */

  --header-height:           48px;       /* Mobile (<640px) — fits 28px logo at 58% */
  --header-height-tablet:    52px;       /* Tablet (640px–1023px) — fits 30px logo at 58% */
  --header-height-desktop:   55px;       /* Desktop / laptop (≥1024px) — fits 35px logo at 64% */
  --toc-height:              44px;       /* Profile-page sticky TOC bar (desktop) — used to offset sidebar below both header + TOC */

  /* Logo image dimensions — header (small, scales with header) + footer
     (larger, dark-surface treatment via filter: invert in layout.css). */
  --site-logo-height:           28px;    /* Mobile (<640px) */
  --site-logo-height-tablet:    30px;    /* Tablet (640+) */
  --site-logo-height-desktop:   35px;    /* Desktop (1024+) */
  --site-footer-logo-height:    45px;    /* Footer logo — larger than header */

  --glance-count-col:        36px;       /* Fixed-width count column in glance bar rows */
  --admin-sidebar-width:     230px;      /* /pcg-dev/ control room — left nav rail */
  --mega-left-col-width:     260px;      /* Header mega menus — lavender left column track */
  --menu-toggle-size:        40px;       /* Hamburger button tap target */
  --social-btn-size:         40px;       /* Footer social-icon circular buttons */
  --hamburger-bar-width:     22px;       /* Individual hamburger bar width */

  /* Breakpoints (used in @media queries via fixed values, not vars — CSS limitation).
     Documented here as the canonical reference. Padding scales at each step:
        mobile  (default)  16px
        tablet  (640+)     24px
        desktop (1024+)    32px
        large   (1440+)    48px
     Container caps at --container-max-width (1400px) on viewports ≥ 1400. */
  /*
     --bp-tablet:  640px;
     --bp-desktop: 1024px;
     --bp-large:   1280px;
     --bp-xl:      1440px;
  */


  /* =====================================================================
     6. Z-INDEX SCALE
     ===================================================================== */

  --z-dropdown:              100;
  --z-sticky:                200;
  --z-fixed:                 300;
  --z-modal-backdrop:        400;
  --z-modal:                 500;
  --z-toast:                 600;

  /* =====================================================================
     7. TOOLS — Compare tool layout sizes
     ===================================================================== */

  --compare-label-col-w:       160px;   /* sticky metric-label left column */
  --compare-data-col-min-w:    160px;   /* min-width per college data column */
  --compare-table-min-w:       700px;   /* 1 label col + 4 data cols; scrolls below this on mobile */
  --compare-dropdown-max-h:    280px;   /* autocomplete dropdown max-height */
  --compare-one-card-max-w:    320px;   /* single-college card max-width */

  --cmq-score-col-w:           210px;   /* College Match Quiz — fixed score column width (desktop) */

  /* Homepage FAQ — max width when .profile-faq is rendered inside the homepage. */
  --home-faq-max-w:            800px;
}