/*
 * ============================================================
 *  PELICAN DIGITAL PATHWAYS — DESIGN TOKENS
 *  Design System: Pathways v1.2
 * ============================================================
 *
 *  Light-first. Warm cream base. WCAG AA compliant throughout.
 *
 *  Sections:
 *    1. Brand Colors
 *    2. Background & Surface
 *    3. Border
 *    4. Text
 *    5. Semantic / Tint
 *    6. Typography — Families
 *    7. Typography — Scale
 *    8. Typography — Leading, Tracking, Weight
 *    9. Spacing
 *   10. Border Radius
 *   11. Shadows
 *   12. Motion
 *   13. Layout
 *   14. Z-Index
 *
 *  Palette roles:
 *    Coral  (#ff3a1a)           — brand soul: display gradients, CTA buttons,
 *                                 decorative lines, glows, list accents
 *    Blue   (#0099ff / #1e6dbf) — interaction layer: focus rings, form states,
 *                                 nav underlines, badges, secondary CTA
 *    Orange (#fe881f)           — warm secondary accent, gradient pair with coral
 *
 *  Accessibility note:
 *    --color-brand-coral (#ff3a1a) is 3.4:1 on light bg —
 *    use for large/display text and decorative elements only.
 *    --color-brand-blue (#0099ff) is 2.7:1 on light bg —
 *    decorative / large text on light; safe on --color-surface-dark.
 *    --color-text-accent (#1e6dbf) is 4.5:1 on --color-bg —
 *    the interactive text color: links, focus, form states on light bg.
 *    --color-error (#c42d0e) is 5.3:1 on --color-bg —
 *    reserved exclusively for error states, never repurposed.
 * ============================================================
 */

:root {

  /* ── 1. Brand Colors ───────────────────────────────────── */
  --color-brand-blue:         #0099ff;   /* primary brand — decorative / large text (2.7:1 on light) */
  --color-brand-blue-light:   #33b0ff;   /* lighter blue — for use on dark surfaces */
  --color-brand-blue-dark:    #1e6dbf;   /* interactive blue — 4.5:1 on light bg */
  --color-brand-coral:        #ff3a1a;   /* warm accent — decorative / large text (3.4:1 on light) */
  --color-brand-coral-light:  #ff5c3f;
  --color-brand-coral-dark:   #cc2e14;
  --color-brand-orange:       #fe881f;   /* warm secondary accent */
  --color-brand-orange-light: #ffa14d;
  --color-brand-orange-dark:  #d97010;
  --color-brand-gray:         #606060;

  /* ── 2. Background & Surface (light-first) ─────────────── */
  --color-bg:               #faf8f5;   /* warm cream — page background */
  --color-bg-alt:           #f3f0eb;   /* slightly deeper cream — alternate sections */
  --color-surface:          #ffffff;   /* cards, panels, header */
  --color-surface-raised:   #f8f6f2;   /* nested elements, hover states */
  --color-surface-overlay:  #efecea;   /* overlays, tooltips */

  /* Inverse surfaces for dark sections (e.g. CTA at page end) */
  --color-surface-dark:        #1a1614;
  --color-surface-dark-raised: #262220;

  /* ── 3. Border ─────────────────────────────────────────── */
  --color-border:           #e4e0da;
  --color-border-subtle:    #edeae5;
  --color-border-strong:    #ccc7bf;

  /* ── 4. Text ───────────────────────────────────────────── */
  --color-text:             #1a1614;   /* 19:1 on --color-bg */
  --color-text-secondary:   #5c5854;   /* 7.2:1 on --color-bg */
  --color-text-tertiary:    #8c8880;   /* 4.6:1 on --color-bg */
  --color-text-inverse:     #f0ece7;   /* for text on dark surfaces */
  --color-text-on-brand:    #ffffff;   /* for text on coral/orange bg */

  /* Primary interactive blue for light backgrounds.
     #1e6dbf = 4.5:1 on --color-bg, 4.9:1 on --color-surface. */
  --color-text-accent:      #1e6dbf;

  /* ── 5. Semantic / Tints ────────────────────────────────── */
  --color-success:  #1a7a4a;   /* 5.1:1 on light bg */
  --color-warning:  #8a5200;   /* 5.4:1 on light bg */
  --color-error:    #c42d0e;   /* 5.3:1 on light bg — dedicated red, never repurposed */
  --color-info:     #1d4ed8;   /* 6.2:1 on light bg */

  --tint-blue:          rgba(0, 153, 255, 0.07);
  --tint-blue-strong:   rgba(0, 153, 255, 0.14);
  --tint-coral:         rgba(255, 58, 26, 0.07);
  --tint-coral-strong:  rgba(255, 58, 26, 0.13);
  --tint-orange:        rgba(254, 136, 31, 0.07);
  --tint-dark:          rgba(26, 22, 20, 0.06);

  /* Glows for light backgrounds */
  --glow-blue:     0 4px 20px rgba(30, 109, 191, 0.22);
  --glow-blue-sm:  0 2px 10px rgba(30, 109, 191, 0.16);
  --glow-coral:    0 4px 20px rgba(196, 45, 14, 0.18);
  --glow-coral-sm: 0 2px 10px rgba(196, 45, 14, 0.14);

  /* ── 6. Typography — Families ──────────────────────────── */
  --font-logo:    'altivo', sans-serif;
  --font-display: 'altivo', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* ── 7. Typography — Scale ──────────────────────────────── */
  --text-2xs:  0.625rem;   /*  10px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */
  --text-8xl:  6rem;       /*  96px */

  /* ── 8. Typography — Leading / Tracking / Weight ────────── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── 9. Spacing (4px base grid) ────────────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */

  /* ── 10. Border Radius ──────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── 11. Shadows (tuned for light backgrounds) ──────────── */
  --shadow-xs: 0 1px 3px  rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.09);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.14);

  /* ── 12. Motion ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
  --duration-slower: 550ms;

  /* ── 13. Layout ─────────────────────────────────────────── */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1440px;
  --container-content: 680px;
  --container-wide:    1600px;

  /* ── 14. Z-Index ────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

}