/* ============================================================================
   Lucent Studio — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Mirrors src/index.css + tailwind.config.ts from the production site.
   ============================================================================ */

/* ─── FONT FACES ──────────────────────────────────────────────────────────── */

/* Montserrat — primary sans (body + headlines) */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display — used for italic editorial emphasis ("das wirkt.") */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BoldItalic-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Mixta Didone — high-display serif (sparingly used) */
@font-face {
  font-family: 'Mixta Didone';
  src: url('fonts/mixta-didone-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ─── DESIGN TOKENS ───────────────────────────────────────────────────────── */

:root {
  /* ── Brand palette (HSL, mirrors --deep-ocean / --cream / --slate-blue-grey) ── */
  --deep-ocean:        220 42% 26%;            /* #2A4172 — primary brand surface */
  --deep-ocean-bg:     229 32.84% 14%;         /* darker overscroll/footer band  */
  --deep-ocean-card:   229 32.84% 26.27%;      /* card / popover background      */
  --cream:             40 20% 97%;             /* #F7F4EE — primary text + chips */
  --slate-blue-grey:   201 10% 75%;            /* muted neutral                  */
  --accent-blue:       210 80% 70%;            /* used in subtle blue glow ♥     */

  /* ── Semantic foreground tints (cream @ opacity steps) ── */
  --fg-1:        rgba(238, 233, 224, 0.95);   /* primary text                   */
  --fg-2:        rgba(238, 233, 224, 0.85);   /* strong secondary               */
  --fg-3:        rgba(238, 233, 224, 0.70);   /* secondary                      */
  --fg-4:        rgba(238, 233, 224, 0.55);   /* tertiary / labels              */
  --fg-5:        rgba(238, 233, 224, 0.45);   /* descriptive body on dark       */
  --fg-6:        rgba(238, 233, 224, 0.30);   /* placeholder / disabled         */
  --fg-inverse:  hsl(229 32.84% 26.27%);      /* deep ocean — text on cream     */

  /* ── Surface tints (cream-on-dark glass system) ── */
  --surface-1:   rgba(238, 233, 224, 0.025);  /* faintest panel                 */
  --surface-2:   rgba(238, 233, 224, 0.04);   /* default chip / card            */
  --surface-3:   rgba(238, 233, 224, 0.07);   /* hover / active pill            */
  --surface-4:   rgba(238, 233, 224, 0.12);   /* selected                       */

  --hairline-1:  rgba(238, 233, 224, 0.07);   /* faint divider                  */
  --hairline-2:  rgba(238, 233, 224, 0.10);   /* default border                 */
  --hairline-3:  rgba(238, 233, 224, 0.18);   /* prominent border               */
  --hairline-4:  rgba(238, 233, 224, 0.22);   /* button outline                 */

  --destructive: 0 84% 60%;
  --destructive-foreground: 40 20% 97%;

  /* ── Type families ── */
  --font-sans:     'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-headline: 'Montserrat', sans-serif;
  --font-keyword:  'Montserrat', sans-serif;    /* italic 700 — emphasis        */
  --font-mixta:    'Mixta Didone', serif;
  --font-italic-display: 'Playfair Display', serif; /* used italic-700          */
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Type scale (fluid clamps mirror tailwind.config.ts) ── */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */
  --fs-7xl:  4.5rem;    /* 72 */

  --h1: clamp(2rem, 5vw, 3.5rem);
  --h2: clamp(1.75rem, 4vw, 2.75rem);
  --h3: clamp(1.5rem, 3vw, 2rem);
  --h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --hero: clamp(3.5rem, 8vw, 7.5rem);

  /* ── Letter spacing + line height ── */
  --tracking-headline: -0.02em;
  --tracking-body:      0.015em;
  --tracking-ui:        0.01em;
  --tracking-eyebrow:   0.22em;

  --leading-tight:   1.25;
  --leading-normal:  1.65;
  --leading-relaxed: 1.75;
  --leading-loose:   1.85;

  /* ── Radii ── */
  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;    /* default --radius */
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-pill: 9999px;

  /* ── Spacing (8-pt scale) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --section-padding-y:    clamp(56px, 8vw, 128px);
  --section-padding-y-lg: clamp(64px, 10vw, 160px);
  --container-max:        1280px;
  --container-narrow:     896px;
  --container-wide:       1536px;

  /* ── Shadows ── */
  --shadow-soft:  0 4px 24px -4px hsl(0 0% 0% / 0.25);
  --shadow-ocean: 0 8px 32px -8px hsl(0 0% 0% / 0.40);
  --shadow-glow:  0 0 20px hsl(40 20% 97% / 0.30), 0 0 40px hsl(40 20% 97% / 0.15);
  --shadow-glass: 0 8px 32px 0 rgba(0,0,0,0.25);
  --shadow-cta:   0 6px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.07);

  /* ── Inner highlight (top-edge glass curve) ── */
  --inset-glass: inset 0 1px 0 rgba(255,255,255,0.45),
                 inset 0 -1px 0 rgba(255,255,255,0.08),
                 0 0 0 1px rgba(255,255,255,0.09);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, hsl(40 20% 97%) 0%, hsl(40 20% 85%) 100%);
  --gradient-ocean:   linear-gradient(135deg, hsl(220 42% 26%) 0%, hsl(220 42% 35%) 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-rim:     linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 40%, transparent 100%);
  --gradient-fade-divider: linear-gradient(90deg, transparent, rgba(238,233,224,0.40), transparent);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* the house easing       */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 2.2);

  --dur-fast:   0.20s;
  --dur-base:   0.30s;
  --dur-smooth: 0.40s;
  --dur-slow:   0.70s;
  --dur-hero:   0.85s;

  --transition-smooth: all 0.4s var(--ease-out);
  --transition-bounce: all 0.6s var(--ease-bounce);
}


/* ─── ELEMENT DEFAULTS (when this stylesheet is loaded standalone) ────────── */

html {
  background-color: hsl(var(--deep-ocean-bg));
  color: var(--fg-1);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-headline);
  margin-bottom: 0.75em;
  text-wrap: balance;
  color: var(--fg-1);
}

h1 { font-size: var(--h1); line-height: 1.15; margin-bottom: 0.85em; }
h2 { font-size: var(--h2); line-height: 1.20; margin-bottom: 0.80em; }
h3 { font-size: var(--h3); line-height: 1.30; }
h4 { font-size: var(--h4); }

p {
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  margin-bottom: 1.25em;
  text-wrap: pretty;
}

/* The signature italic emphasis class (e.g. "das wirkt.", "Growth-Partner.") */
.keyword,
.font-keyword {
  font-family: var(--font-keyword);
  font-weight: 700;
  font-style: italic;
  color: var(--fg-2);
}

/* Eyebrow chip — a tiny uppercase tracked label sitting above a section H2 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--hairline-3);
  color: var(--fg-4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 500;
}

/* Pill chip — used inside service cards for keyword tags */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  color: var(--fg-4);
  font-size: 11px;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

/* Divider — a 60px gradient hairline used between sections */
.section-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}
.section-divider::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gradient-fade-divider);
}

/* Container utilities */
.container-custom { max-width: var(--container-max);    margin-inline: auto; padding-inline: 16px; }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 16px; }
.container-wide   { max-width: var(--container-wide);   margin-inline: auto; padding-inline: 16px; }