/* RoséGeo Design System — tokens (flattened for deployment) */

/* ---- fonts ---- */
/* ─────────────────────────────────────────────────────────
   Fonts — RoséGeo Design System

   SUBSTITUTION NOTE: No brand font files were provided.
   The following Google Fonts are used as stand-ins:

     Syne (400–800)          → Display headings & wordmark energy
     Outfit (300–700)        → Body copy, UI labels, forms
     JetBrains Mono (400–500)→ Code, data tables, technical refs

   To replace: supply .woff2 files and swap this @import for
   @font-face rules pointing to the local files.
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');


/* ---- colors ---- */
/* ─────────────────────────────────────────────────────────
   Colors — RoséGeo Design System
   All values in OKLCH for perceptual uniformity.
   ───────────────────────────────────────────────────────── */

:root {

  /* ── Rose (Primary brand) ── */
  /* Exact logo pink, sampled from the master SVG lockup */
  --brand-pink: #fcbad3;
  /* rose-300 == logo pink */
  --rose-50:  oklch(98.5% 0.008 355);
  --rose-100: oklch(96%   0.020 355);
  --rose-200: oklch(92%   0.040 355);
  --rose-300: oklch(86%   0.065 355);
  --rose-400: oklch(79%   0.090 355);
  --rose-500: oklch(69%   0.115 355);
  --rose-600: oklch(58%   0.115 355);
  --rose-700: oklch(47%   0.105 355);
  --rose-800: oklch(36%   0.088 355);
  --rose-900: oklch(25%   0.068 355);

  /* ── Coral (Secondary warm accent) ── */
  --coral-50:  oklch(98%   0.010 22);
  --coral-100: oklch(96%   0.025 22);
  --coral-200: oklch(91%   0.055 22);
  --coral-300: oklch(84%   0.090 22);
  --coral-500: oklch(68%   0.128 22);
  --coral-700: oklch(50%   0.115 22);

  /* ── Gold (Accent — "like gold" brand reference) ── */
  --gold-50:  oklch(98%   0.018 80);
  --gold-100: oklch(96%   0.038 80);
  --gold-300: oklch(87%   0.098 80);
  --gold-500: oklch(74%   0.140 80);
  --gold-700: oklch(56%   0.130 80);

  /* ── Stone (Warm neutral — earthy / geological) ── */
  --stone-50:  oklch(99%   0.004 50);
  --stone-100: oklch(96%   0.010 50);
  --stone-200: oklch(91%   0.018 50);
  --stone-300: oklch(83%   0.025 50);
  --stone-400: oklch(73%   0.025 50);
  --stone-500: oklch(62%   0.025 50);
  --stone-600: oklch(50%   0.022 50);
  --stone-700: oklch(40%   0.020 50);
  --stone-800: oklch(28%   0.015 50);
  --stone-900: oklch(18%   0.010 50);

  /* ── Semantic: Brand ── */
  --color-brand:        var(--rose-400);
  --color-brand-light:  var(--rose-200);
  --color-brand-dark:   var(--rose-600);
  --color-accent:       var(--coral-500);
  --color-gold:         var(--gold-500);

  /* ── Semantic: Foreground ── */
  --fg-1:        var(--stone-900);
  --fg-2:        var(--stone-700);
  --fg-3:        var(--stone-500);
  --fg-muted:    var(--stone-400);
  --fg-on-brand: white;

  /* ── Semantic: Background ── */
  --bg-base:        var(--stone-50);
  --bg-subtle:      var(--stone-100);
  --bg-card:        white;
  --bg-brand-tint:  var(--rose-50);

  /* ── Semantic: Border ── */
  --border-default: var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-brand:   var(--rose-300);

  /* ── Semantic: Text ── */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-tertiary:  var(--stone-500);
  --text-link:      var(--rose-600);
  --text-brand:     var(--rose-600);

  /* ── Semantic: States ── */
  --state-success:    oklch(62%  0.155 145);
  --state-success-bg: oklch(96%  0.040 145);
  --state-warning:    oklch(68%  0.148 75);
  --state-warning-bg: oklch(96%  0.045 75);
  --state-error:      oklch(58%  0.190 22);
  --state-error-bg:   oklch(97%  0.035 22);
  --state-info:       oklch(62%  0.135 230);
  --state-info-bg:    oklch(96%  0.030 230);
}


/* ---- typography ---- */
/* ─────────────────────────────────────────────────────────
   Typography — RoséGeo Design System
   ───────────────────────────────────────────────────────── */

:root {

  /* ── Font Families ── */
  --font-display: 'Syne', sans-serif;
  --font-sans:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Type Scale (rem, 16px base) ── */
  --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 */

  /* ── Font Weights ── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  /* ── Letter Spacings ── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.18em;

  /* ── Semantic Type Ramps ── */
  /* Display — Syne, extrabold/bold, tight leading */
  --type-display-2xl: 800 var(--text-7xl)/var(--leading-tight) var(--font-display);
  --type-display-xl:  800 var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-display-lg:  700 var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-display-md:  700 var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-display-sm:  600 var(--text-3xl)/var(--leading-snug)  var(--font-display);

  /* Heading — Syne, semibold */
  --type-h1: 700 var(--text-4xl)/var(--leading-tight)  var(--font-display);
  --type-h2: 700 var(--text-3xl)/var(--leading-snug)   var(--font-display);
  --type-h3: 600 var(--text-2xl)/var(--leading-snug)   var(--font-display);
  --type-h4: 600 var(--text-xl)/var(--leading-snug)    var(--font-sans);
  --type-h5: 600 var(--text-lg)/var(--leading-snug)    var(--font-sans);

  /* Body — Outfit */
  --type-body-xl: 400 var(--text-xl)/var(--leading-relaxed)  var(--font-sans);
  --type-body-lg: 400 var(--text-lg)/var(--leading-relaxed)  var(--font-sans);
  --type-body:    400 var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-body-sm: 400 var(--text-sm)/var(--leading-normal)   var(--font-sans);

  /* UI */
  --type-label-lg: 500 var(--text-base)/1 var(--font-sans);
  --type-label:    500 var(--text-sm)/1   var(--font-sans);
  --type-label-sm: 500 var(--text-xs)/1  var(--font-sans);
  --type-caption:  400 var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-overline: 600 var(--text-xs)/1  var(--font-sans);  /* + tracking-widest + uppercase */

  /* Mono */
  --type-mono:    400 var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-mono-sm: 400 var(--text-xs)/var(--leading-normal) var(--font-mono);
}


/* ---- spacing ---- */
/* ─────────────────────────────────────────────────────────
   Spacing — RoséGeo Design System
   Base unit: 4px (0.25rem).
   ───────────────────────────────────────────────────────── */

:root {

  /* ── Raw Scale ── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;   /*  2px */
  --space-1:    0.25rem;    /*  4px */
  --space-1-5:  0.375rem;   /*  6px */
  --space-2:    0.5rem;     /*  8px */
  --space-2-5:  0.625rem;   /* 10px */
  --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 */

  /* ── Semantic: Gap ── */
  --gap-xs:    var(--space-1);    /*  4px  */
  --gap-sm:    var(--space-2);    /*  8px  */
  --gap-md:    var(--space-4);    /* 16px  */
  --gap-lg:    var(--space-6);    /* 24px  */
  --gap-xl:    var(--space-8);    /* 32px  */
  --gap-2xl:   var(--space-12);   /* 48px  */
  --gap-3xl:   var(--space-16);   /* 64px  */

  /* ── Semantic: Padding ── */
  --pad-xs:    var(--space-2);
  --pad-sm:    var(--space-3);
  --pad-md:    var(--space-4);
  --pad-lg:    var(--space-6);
  --pad-xl:    var(--space-8);
  --pad-2xl:   var(--space-12);

  /* ── Semantic: Layout ── */
  --section-y:       var(--space-24);
  --content-max:     1240px;
  --content-mid:     900px;
  --content-narrow:  680px;
  --nav-height:      72px;
}


/* ---- effects ---- */
/* ─────────────────────────────────────────────────────────
   Effects — RoséGeo Design System
   Shadows use warm stone tones; not pure black.
   ───────────────────────────────────────────────────────── */

:root {

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm:   0.25rem;     /*  4px */
  --radius-md:   0.5rem;      /*  8px */
  --radius-lg:   0.75rem;     /* 12px */
  --radius-xl:   1rem;        /* 16px */
  --radius-2xl:  1.5rem;      /* 24px */
  --radius-3xl:  2rem;        /* 32px */
  --radius-full: 9999px;

  /* ── Shadows (warm-toned) ── */
  --shadow-xs:    0 1px 2px oklch(28% 0.015 50 / 0.07);
  --shadow-sm:    0 1px 3px oklch(28% 0.015 50 / 0.08),
                  0 1px 2px oklch(28% 0.015 50 / 0.06);
  --shadow-md:    0 4px 8px oklch(28% 0.015 50 / 0.07),
                  0 2px 4px oklch(28% 0.015 50 / 0.05);
  --shadow-lg:    0 10px 20px oklch(28% 0.015 50 / 0.08),
                  0 4px 8px oklch(28% 0.015 50 / 0.04);
  --shadow-xl:    0 20px 40px oklch(28% 0.015 50 / 0.10),
                  0 8px 16px oklch(28% 0.015 50 / 0.04);
  --shadow-2xl:   0 40px 64px oklch(28% 0.015 50 / 0.12);
  --shadow-inner: inset 0 2px 4px oklch(28% 0.015 50 / 0.06);
  --shadow-brand: 0 4px 20px oklch(79% 0.090 355 / 0.32);
  --shadow-gold:  0 4px 20px oklch(74% 0.140 80  / 0.28);

  /* ── Brand gradient rule ──
     From the brochure cover: a thin full-bleed pink→gold rule dividing
     sections on dark surfaces. Use at 3–4px tall, edge to edge, dark only. */
  --gradient-brand: linear-gradient(to right, var(--rose-400), var(--coral-500), var(--gold-300)); /* @kind other */
  --rule-brand-height: 3px;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.0,  0,    0.2,  1); /* @kind other */
  --ease-in:     cubic-bezier(0.4,  0,    1.0,  1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4,  0,    0.2,  1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.4,  0.64, 1); /* @kind other */

  /* ── Duration ── */
  --duration-instant: 50ms;   /* @kind other */
  --duration-fast:    120ms;  /* @kind other */
  --duration-base:    200ms;  /* @kind other */
  --duration-slow:    350ms;  /* @kind other */
  --duration-slower:  500ms;  /* @kind other */

  /* ── Transition shorthands ── */
  --transition-base: all var(--duration-base) var(--ease-out); /* @kind other */
  --transition-fast: all var(--duration-fast) var(--ease-out); /* @kind other */
  --transition-slow: all var(--duration-slow) var(--ease-out); /* @kind other */

  /* ── Z-index ── */
  --z-base:     0;   /* @kind other */
  --z-raised:   10;  /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
  --z-tooltip:  600; /* @kind other */
}