/* @por/ds v1.2.0 · web design tokens · generated 2026-06-19, DO NOT HAND-EDIT.
   Source of truth: por-design-system/src/. Rebuild: npm run build (in the package). */

:root {
  /* ---- Brand colours (core) ------------------------------------------------ */
  --por-blue:        #4444e9;   /* PRIMARY, electric indigo (logo tile), actions, links, focus */
  --por-blue-dark:   #2f30c9;   /* primary hover / deep accent */
  --por-orange:      #f66b53;   /* ACCENT, coral, highlights, energy */
  --por-orange-ink:  #d8482e;   /* coral hover / AA-ish coral for borders */
  --por-lavender:    #f5b2ff;   /* orchid (the logo mark) */
  --por-lavender-ink:#9b3fce;   /* AA-dark orchid for text/icons on an orchid tint (5.2:1 on white) */
  --por-sky:         #bcd9ff;   /* soft sky tint */

  /* ---- Extended accents (shapes + illustration) ---------------------------- */
  /* Exact hexes taken from the brand illustration SVGs in Assets/Website/SVG. */
  --por-pink:        #f59fcf;   /* rose */
  --por-green:       #05cca3;   /* teal / mint */
  --por-olive:       #e8b84b;   /* warm gold (separators, small accents) */
  --por-forest:      #14483f;   /* deep teal (festival ground) */
  --por-red:         #ef4444;   /* red */
  --por-peach:       #ffe0d4;   /* soft peach (warm CTA band) */

  /* ---- Neutrals (warm, anchored on the illustration ink #322a26) ----------- */
  --neutral-00:      #322a26;   /* ink, body text */
  --neutral-01:      #5b5249;
  --neutral-02:      #837a6f;
  --neutral-03:      #aaa093;
  --neutral-04:      #e9dfd0;   /* subtle fills (panels, hero ground) */
  --neutral-05:      #f2ede4;   /* canvas, warm cream (brand background) */
  --white:           #ffffff;
  --black:           #1c1714;   /* near-black warm (frames, dark pill buttons) */

  /* ---- Semantic roles ------------------------------------------------------ */
  --color-primary:        var(--por-blue);
  --color-primary-hover:  var(--por-blue-dark);
  --color-accent:         var(--por-orange);
  --color-accent-hover:   var(--por-orange-ink);
  /* Error/danger text + borders, clears WCAG AA as text on the cream canvas. */
  --color-danger:         #c0291f;

  --canvas:        var(--neutral-05);          /* page background */
  --surface:       var(--white);               /* cards, nav, inputs */
  --surface-alt:   var(--neutral-04);          /* subtle fills */
  --text:          var(--neutral-00);
  --text-muted:    rgba(50, 42, 38, 0.82);     /* WCAG AA: ≥4.5:1 on canvas/white/surface-alt */
  --text-faint:    rgba(50, 42, 38, 0.42);
  --on-primary:    #ffffff;
  --border:        rgba(50, 42, 38, 0.12);
  --border-strong: rgba(50, 42, 38, 0.22);

  /* Tints, translucent brand fills (icon chips, pills, current-nav). */
  --primary-a08:   rgba(68, 68, 233, 0.08);    /* nav current-page chip */
  --primary-a10:   rgba(68, 68, 233, 0.10);    /* icon chips, flow nums, blue pills */
  --accent-a12:    rgba(246, 107, 83, 0.14);   /* coral icon chips */
  --lav-a18:       rgba(245, 178, 255, 0.30);  /* orchid icon chips (light hue → higher alpha) */

  /* On the indigo band (text/borders set over --color-primary) */
  --on-primary-muted:  rgba(255, 255, 255, 0.82);  /* lead copy on indigo */
  --on-primary-border: rgba(255, 255, 255, 0.60);  /* ghost outline ≥3:1 on indigo */
  --on-primary-hover:  rgba(255, 255, 255, 0.12);  /* ghost hover fill on indigo */

  /* ---- Typography ---------------------------------------------------------- */
  /* Two families: Geologica for display/headings, Poppins for body/UI. */
  --font-sans:    "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Geologica", "Poppins", system-ui, -apple-system, sans-serif;

  /* weight roles */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;
  --fw-black:    900;

  /* fluid type scale (min, preferred, max), Geologica Black is heavy, so the
     display max is a touch smaller than a single-family system would use. */
  --fs-display: clamp(2.25rem, 1rem + 5.2vw, 4.75rem); /* hero h1 */
  --fs-h1:      clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.9vw, 2.4rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + 0.75vw, 1.6rem);
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-label:   0.75rem;     /* 12px uppercase */

  --lh-tight:  1.05;   /* display */
  --lh-head:   1.14;   /* headings */
  --lh-snug:   1.3;    /* leads */
  --lh-body:   1.65;   /* paragraphs (Poppins reads better a touch looser) */

  /* Poppins / Geologica are wider than a grotesque, gentler negative tracking. */
  --tracking:        -0.02em;
  --tracking-tight:  -0.03em;  /* very large display */
  --tracking-label:  0.08em;   /* uppercase labels read better open */

  /* ---- Spacing (8px base unit) -------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y:  clamp(48px, 6vw, 88px);
  --gutter:     clamp(20px, 4vw, 40px);
  --container:        1200px;
  --container-narrow: 720px;

  /* ---- Radius -------------------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---- Shadow / elevation (warm, to sit on cream) ------------------------- */
  --shadow-soft: 0 8px 22px rgba(50, 42, 38, 0.07);
  --shadow-md:   0 12px 28px rgba(50, 42, 38, 0.11);
  --shadow-lg:   0 26px 70px rgba(50, 42, 38, 0.18);
  --ring:        0 0 0 3px rgba(68, 68, 233, 0.32);

  /* ---- Z-index scale ------------------------------------------------------- */
  --z-base:    0;     /* decorative shapes (behind content) */
  --z-content: 1;     /* content above shapes inside a shape-field */
  --z-nav:     50;    /* sticky nav pill */
  --z-overlay: 100;   /* dropdowns, popovers */
  --z-modal:   1000;  /* full-screen modal / mobile sheet */

  /* ---- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.18s;
}