/* ==========================================================================
   theme.css — Brand tokens + semantic aliases over OpenProps
   Load order: open-props → normalize → theme.css → global.css → utils.css → components.css

   PRINCIPLE: Don't redefine what OpenProps already provides.
   This file adds brand identity and semantic meaning on top of the
   OpenProps foundation. Use OpenProps tokens directly for:

     Font sizes    --font-size-0 (0.75rem) … --font-size-8 (3.5rem)
                   --font-size-fluid-0 … --font-size-fluid-3
     Font weights  --font-weight-4 (400) … --font-weight-7 (700)
     Line heights  --font-lineheight-0 (1.1) … --font-lineheight-4 (1.75)
     Radii         --radius-1 (2px) … --radius-6 (8rem), --radius-round
     Shadows       --shadow-1 … --shadow-6
     Easings       --ease-out-3, --ease-in-out-2, --ease-spring-2, etc.
   ========================================================================== */

:root {
  /* Force light scheme — the site is light-themed but OpenProps'
     normalize uses "light dark", which lets the OS dark-mode leak
     into native elements (<details>, <select>, scrollbars, etc.) */
  color-scheme: light;

  /* ================================================================
     BRAND COLORS
     ================================================================ */

  /* ---- Primary (Navy #002b49) ---- */
  --color-primary-light: #e8f0f7;
  --color-primary-200:   #a3c4db;
  --color-primary-400:   #1a5a8a;
  --color-primary:       #002b49;
  --color-primary-dark:  #001e33;

  /* ---- Accent (Orange #E57200) ---- */
  --color-accent-light:  #fef5ec;
  --color-accent-200:    #f5c090;
  --color-accent-400:    #ff8c22;
  --color-accent:        #E57200;
  --color-accent-dark:   #b35a00;

  /* ---- Neutral (Cool Gray / Slate) ---- */
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* ---- Semantic Status ---- */
  --color-success:       #16a34a;
  --color-success-light: #f0fdf4;
  --color-success-dark:  #15803d;

  --color-warning:       #d97706;
  --color-warning-light: #fffbeb;
  --color-warning-dark:  #b45309;

  --color-error:         #dc2626;
  --color-error-light:   #fef2f2;
  --color-error-dark:    #b91c1c;

  --color-info:          #2563eb;
  --color-info-light:    #eff6ff;
  --color-info-dark:     #1d4ed8;

  /* ================================================================
     SEMANTIC ALIASES
     Purpose-driven names so downstream files never hardcode values.
     ================================================================ */

  /* ---- Text ---- */
  --text-primary:    var(--color-gray-900);
  --text-secondary:  var(--color-gray-600);
  --text-muted:      var(--color-gray-400);
  --text-inverse:    #ffffff;
  --text-link:       var(--color-primary);
  --text-link-hover: var(--color-primary-dark);

  /* ---- Surfaces ---- */
  --surface-page:     #f7f9fc;
  --surface-card:     var(--color-gray-50);
  --surface-elevated: #ffffff;
  --surface-overlay:  rgba(15, 23, 42, 0.5);

  /* ---- Borders ---- */
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);

  /* ================================================================
     SPACING
     Semantic names → OpenProps --size-* tokens.
     Direct values only where OpenProps has no match.

     Scale: 4 · 8 · 16 · 24 · 32 · 48 · 80 · 120
     ================================================================ */
  --space-3xs: var(--size-1);   /*   4px  */
  --space-2xs: var(--size-2);   /*   8px  */
  --space-sm:  var(--size-3);   /*  16px  */
  --space-md:  var(--size-5);   /*  24px  */
  --space-lg:  var(--size-7);   /*  32px  */
  --space-xl:  var(--size-8);   /*  48px  */
  --space-2xl: var(--size-10);  /*  80px  */
  --space-3xl: var(--size-11);  /* 120px  */

  /* ================================================================
     TYPOGRAPHY
     Font families only — sizes, weights, and line-heights come from
     OpenProps directly.

     Quick-ref for downstream files:
       --font-size-0   (0.75rem / 12px)
       --font-size-1   (1rem / 16px)
       --font-size-2   (1.1rem / ~18px)
       --font-size-3   (1.25rem / 20px)
       --font-size-4   (1.5rem / 24px)
       --font-size-5   (2rem / 32px)
       --font-size-6   (2.5rem / 40px)
       --font-size-7   (3rem / 48px)
       --font-size-fluid-0 … --font-size-fluid-3 for headings
     ================================================================ */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ================================================================
     SHADOWS
     OpenProps ships --shadow-1 … --shadow-6 built on --shadow-color
     and --shadow-strength. We tune those to match our cool palette.
     ================================================================ */
  --shadow-color: 220 40% 15%;
  --shadow-strength: 4%;

  /* ================================================================
     TRANSITIONS
     OpenProps provides easings but no duration tokens.

     Preferred easings for this project:
       General   → --ease-out-3
       Enter/exit→ --ease-in-out-2
       Bounce    → --ease-spring-2
     ================================================================ */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ================================================================
     FOCUS
     ================================================================ */
  --focus-ring: 0 0 0 3px rgba(0, 43, 73, 0.4);

  /* ================================================================
     LAYOUT
     ================================================================ */
  --content-max-width: 1500px;

  /* ================================================================
     BREAKPOINTS
     Note: CSS custom properties cannot be used in @media queries.
     These tokens exist as the canonical reference and for use in JS
     or container queries. For @media, use the raw values:

       @media (min-width: 480px)  — sm  (large phones / landscape)
       @media (min-width: 768px)  — md  (tablets)
       @media (min-width: 1024px) — lg  (small desktops / landscape tablets)
       @media (min-width: 1280px) — xl  (desktops)
     ================================================================ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}