/* ============================================================
   DESIGN TOKENS — Ways2College
   Graphite + safety orange. A blueprint, not a landing page.

   FLAT ON PURPOSE. The previous pass was indigo-950 -> indigo-700 hero
   gradients with a cyan glow, radial blooms and frosted glass — i.e. the
   default look every generated SaaS template ships with, which is exactly why
   it read as machine-made. So: flat fills, hairline rules, ONE accent, and no
   gradient/glow/blur anywhere. If you are tempted to add a gradient here,
   don't — let type and spacing do the work instead.

   The --gradient-* tokens survive as FLAT COLOURS because the component layer
   references them by name; they are no longer gradients.

   NOTE ON NAMING: the accent tokens are still called --gold-*. The values are
   safety orange. Renaming them would touch every stylesheet for no visual
   gain — read "gold" as "accent".
   ============================================================ */

:root {
  /* --- Primary: graphite --- */
  --primary:        #23272f;
  --primary-dark:   #171a20;
  --primary-darker: #0e1014;
  --primary-light:  #3c434f;
  --primary-50:     #f4f5f7;
  --primary-100:    #e6e8ec;
  --primary-200:    #cdd2da;

  /* --- Accent: safety orange (CTA, rails, rules). Used sparingly. --- */
  --gold:        #ff5a1f;
  --gold-dark:   #c2410c;   /* AA-safe for text on light surfaces */
  --gold-light:  #ff8551;
  --gold-50:     #fff6f1;
  --gold-100:    #ffe3d3;

  /* --- Supporting --- */
  --success:  #16a34a;
  --success-50: #f0fdf4;
  --danger:   #dc2626;
  --warning:  #ea580c;
  --info:     #0ea5e9;

  /* --- Dark surfaces (hero, footer, CTA banner) --- */
  --bg-dark:        #14161a;
  --bg-dark-alt:    #1b1e24;
  --bg-dark-accent: #23272f;

  /* --- Light surfaces --- */
  --bg-white:     #ffffff;
  --bg-light:     #f4f5f7;
  --bg-gray:      #e9ebef;
  --bg-light-alt: #dfe2e7;

  /* --- Text on light --- */
  --text-dark:           #14161a;
  --text-dark-secondary: #4a5058;
  --text-dark-tertiary:  #7c838d;

  /* --- Text on dark --- */
  --text-primary:   #f4f5f7;
  --text-secondary: #b6bcc5;
  --text-tertiary:  #868d97;

  /* --- "Gradients": all flat now. Kept as tokens so components still resolve. --- */
  --gradient-hero:    #14161a;
  --gradient-primary: #23272f;
  --gradient-gold:    #ff5a1f;
  --gradient-text:    #ff5a1f;

  /* --- Borders --- */
  --border-color: #dfe2e7;
  --border-light: #eaecf0;

  /* --- Shadows: deliberately restrained. Structure comes from 1px rules. --- */
  --shadow-sm:         0 1px 2px rgba(14, 16, 20, 0.05);
  --shadow-card:       0 1px 3px rgba(14, 16, 20, 0.07), 0 1px 2px rgba(14, 16, 20, 0.04);
  --shadow-card-hover: 0 6px 16px rgba(14, 16, 20, 0.10), 0 2px 4px rgba(14, 16, 20, 0.05);
  --shadow-md:         0 4px 6px -1px rgba(14, 16, 20, 0.09), 0 2px 4px -2px rgba(14, 16, 20, 0.05);
  --shadow-lg:         0 10px 15px -3px rgba(14, 16, 20, 0.1), 0 4px 6px -4px rgba(14, 16, 20, 0.05);
  --shadow-xl:         0 20px 25px -5px rgba(14, 16, 20, 0.11), 0 8px 10px -6px rgba(14, 16, 20, 0.05);
  --shadow-2xl:        0 18px 36px -12px rgba(14, 16, 20, 0.20);
  --shadow-gold:       0 2px 8px rgba(255, 90, 31, 0.28);
  --shadow-navy:       0 2px 8px rgba(14, 16, 20, 0.22);

  /* --- Radius --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Typography --- */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* --- Spacing --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --section-y:    84px;
  --section-y-md: 56px;
  --section-y-sm: 40px;

  --container:    1200px;
  --container-sm: 880px;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* --- Layers --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popup:    500;
  --z-toast:    600;
}