/**
 * @file theme.css
 * Design tokens for Pellucid.
 *
 * Source of truth: Foundations (F1) of the Pellucid Website Revamp design,
 * artifact v50 (Modernist). Retune values here rather than in components or
 * templates; components reference tokens only.
 *
 * Color scheme: light is the default. Dark follows prefers-color-scheme, and
 * a visitor choice (header toggle, stored in localStorage) puts `.light` or
 * `.dark` on <html>, which wins over the system setting. The dark palette is
 * therefore written twice (media query and `.dark`); keep the two in step.
 *
 * The shadcn/ui-compatible names (--background, --primary, ...) are what the
 * Mercury-era components consume. New work uses the --pellucid-* tokens.
 *
 * These values can be changed without rebuilding the compiled CSS. Copy this
 * file to the web root, next to index.php, and clear Drupal's cache to
 * override it per-site.
 */

:root {
  color-scheme: light;

  /* — Palette (light) — */
  --pellucid-ink: #201e1d;
  --pellucid-paper: #f5f8fa;
  --pellucid-surface: #e9f0f4;
  --pellucid-neutral-100: #eef3f6;
  --pellucid-neutral-200: #e3eaef;
  --pellucid-neutral-700: #605d5d;
  --pellucid-neutral-800: #444141;
  --pellucid-accent: #0b67a6;
  --pellucid-accent-600: #0a5688;
  --pellucid-accent-700: #0a4a73;
  --pellucid-accent-800: #0a3d5f;
  --pellucid-accent-100: #eef7fd;
  --pellucid-accent-200: #d6ecfa;
  --pellucid-accent-2: #1f9ed9;
  --pellucid-error: #b3261e; /* form errors and required marks, 6.13:1 on paper, 5.68:1 on surface */
  --pellucid-shadow-lift: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --pellucid-divider: color-mix(in srgb, var(--pellucid-ink) 40%, transparent);
  /* Logo blue (icon). Constant in both schemes; the accent is not it. */
  --pellucid-logo: #1f9cd8;

  /* — Type — */
  --pellucid-font: "Archivo", system-ui, sans-serif;
  --pellucid-weight-body: 400;
  --pellucid-weight-heading: 800;
  --pellucid-heading-weight: var(--pellucid-weight-heading);
  --pellucid-heading-tracking: -0.02em;
  /* Fluid sizes, 390px to 1440px viewport (mobile and desktop frames). */
  --pellucid-text-display: clamp(3.25rem, 1.671rem + 6.476vw, 7.5rem); /* 52 > 120 */
  --pellucid-text-display-lh: 1;
  --pellucid-text-display-tracking: -0.02em;
  --pellucid-text-page: clamp(3.25rem, 1.857rem + 5.714vw, 7rem); /* 52 > 112 */
  --pellucid-text-page-lh: 1;
  --pellucid-text-page-tracking: -0.02em;
  --pellucid-text-statement: clamp(3rem, 2.071rem + 3.81vw, 5.5rem); /* 48 > 88 */
  --pellucid-text-statement-lh: 0.98;
  --pellucid-text-statement-tracking: -0.025em;
  --pellucid-text-h2: clamp(2.25rem, 1.6rem + 2.667vw, 4rem); /* 36 > 64 */
  --pellucid-text-h2-lh: 1;
  --pellucid-text-h2-tracking: -0.02em;
  --pellucid-text-group: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); /* 28 > 40 */
  --pellucid-text-group-lh: 1.05;
  --pellucid-text-group-tracking: -0.02em;
  --pellucid-text-feature: clamp(1.875rem, 1.457rem + 1.714vw, 3rem); /* 30 > 48 */
  --pellucid-text-feature-lh: 1.02;
  --pellucid-text-feature-tracking: -0.02em;
  --pellucid-text-row: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem); /* 24 > 28 */
  --pellucid-text-row-lh: 1.1;
  --pellucid-text-row-tracking: -0.01em;
  --pellucid-text-card: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem); /* 22 > 26 */
  --pellucid-text-card-lh: 1.1;
  --pellucid-text-card-tracking: -0.015em;
  --pellucid-text-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem); /* 17 > 20 */
  --pellucid-text-lead-lh: clamp(1.75rem, 1.61rem + 0.381vw, 2rem); /* 28 > 32 */
  --pellucid-text-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); /* 16 > 17 */
  --pellucid-text-body-lh: clamp(1.625rem, 1.58rem + 0.19vw, 1.75rem); /* 26 > 28 */
  --pellucid-text-small: clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem); /* 14 > 15 */
  --pellucid-text-small-lh: clamp(1.375rem, 1.33rem + 0.19vw, 1.5rem); /* 22 > 24 */
  --pellucid-text-caption: 0.8125rem; /* 13 */
  --pellucid-text-caption-lh: 1.25rem; /* 20 */
  --pellucid-text-eyebrow: 0.8125rem; /* 13, uppercase, accent text */
  --pellucid-text-eyebrow-lh: 0.875rem; /* 14, as the mocks set it */
  --pellucid-text-eyebrow-tracking: 0.08em;
  /* Used on Home, not in F1. */
  --pellucid-text-cta: clamp(3rem, 1.886rem + 4.571vw, 6rem); /* 48 > 96 */
  --pellucid-text-stat: clamp(4rem, 3.257rem + 3.048vw, 6rem); /* 64 > 96 */
  --pellucid-text-wordmark: clamp(6rem, 3.586rem + 9.905vw, 12.5rem); /* 96 > 200 */
  --pellucid-text-nav: 0.875rem; /* 14, header links */
  --pellucid-text-menu: 2.25rem; /* 36, mobile menu links */
  /* Cards and lists (portraits, use cases, facts, quote, next link). */
  --pellucid-text-name: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem); /* 15 > 18, person name */
  --pellucid-text-name-lh: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem); /* 19 > 22 */
  --pellucid-text-meta: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem); /* 12 > 13, role lines */
  --pellucid-text-meta-lh: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem); /* 16 > 18 */
  --pellucid-text-figure: clamp(2.5rem, 2.1286rem + 1.5238vw, 3.5rem); /* 40 > 56, hero stats */
  --pellucid-text-fact: clamp(1.5rem, 1.314rem + 0.762vw, 2rem); /* 24 > 32, profile key facts */
  --pellucid-text-figure-sm: clamp(1.75rem, 1.3786rem + 1.5238vw, 2.75rem); /* 28 > 44, facts */
  --pellucid-text-marquee: clamp(1.75rem, 1.2857rem + 1.9048vw, 3rem); /* 28 > 48 */
  --pellucid-text-quote: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem); /* 24 > 36 */
  --pellucid-text-next: clamp(2rem, 1.5357rem + 1.9048vw, 3.25rem); /* 32 > 52, next case study */
  --pellucid-text-title: clamp(1.5rem, 1.314rem + 0.762vw, 2rem); /* 24 > 32, group titles inside lists and cards */
  --pellucid-text-tile: clamp(1.375rem, 1.143rem + 0.952vw, 2rem); /* 22 > 32, audience tiles */
  --pellucid-text-cell: 1.25rem; /* 20, summary cell and ruled-item titles */
  --pellucid-text-cell-lh: 1.2;
  --pellucid-text-stat-lh: 0.9;
  --pellucid-tracking-stat: -0.03em;
  --pellucid-optical-stat: -0.045em; /* pulls big figures onto the left edge */
  --pellucid-optical-stat-top: -0.055em; /* trims the big figures' leading so the space above matches the space below the labels */
  --pellucid-tracking-tag: 0.02em;
  --pellucid-tracking-caption: 0.04em;
  --pellucid-lh-control: 1.2; /* buttons */
  --pellucid-lh-menu: 1.05; /* mobile menu links */
  --pellucid-lh-footer: 1.3;
  --pellucid-underline-offset: 0.2em; /* text links, about 3px */
  --pellucid-mask-pad: 0.12em; /* room for descenders inside a line mask */
  --pellucid-measure-label: 22ch;
  --pellucid-measure-heading: 20ch;
  --pellucid-measure-heading-narrow: 16ch; /* long section headings the design sets in a narrow column */
  --pellucid-measure-row: 52ch;
  --pellucid-measure-lead: 62ch;
  --pellucid-measure-title: 28ch;
  /* Body text never runs wider than this. */
  --pellucid-measure: 68ch;

  /* — Space: the ten-step scale — */
  --pellucid-space-1: 0.25rem; /* 4 */
  --pellucid-space-2: 0.5rem; /* 8 */
  --pellucid-space-3: 0.75rem; /* 12 */
  --pellucid-space-4: 1rem; /* 16 */
  --pellucid-space-5: 1.5rem; /* 24 */
  --pellucid-space-6: 2rem; /* 32 */
  --pellucid-space-7: 3rem; /* 48 */
  --pellucid-space-8: 4.5rem; /* 72 */
  --pellucid-space-9: 6rem; /* 96 */
  --pellucid-space-10: 7.5rem; /* 120 */

  /* — Layout — */
  --pellucid-container: 1200px;
  --pellucid-gutter: clamp(1.25rem, -1.071rem + 9.524vw, 7.5rem); /* 20 > 120 */
  --pellucid-columns: 12;
  --pellucid-column-gap: var(--pellucid-space-5); /* 24 */
  --pellucid-section-y: clamp(3rem, 1.886rem + 4.571vw, 6rem); /* 48 > 96 */
  --pellucid-section-y-lg: clamp(4.5rem, 3.386rem + 4.571vw, 7.5rem); /* 72 > 120 */
  /* Page-type section rhythm: the mocks space sections differently per template
     (full pages 80, About 96, Home 112 at 1440). The scopes below assign one of
     these to --pellucid-section-y, so components never name a page type. */
  --pellucid-section-y-full: clamp(2.75rem, 1.9143rem + 3.4286vw, 5rem); /* 44 > 80, practice, case study, team member */
  --pellucid-section-y-md: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem); /* 56 > 96, About; footer and Home hero top */
  --pellucid-section-y-home: clamp(4rem, 2.8857rem + 4.5714vw, 7rem); /* 64 > 112, Home */
  --pellucid-section-y-compact: clamp(3.5rem, 3.1286rem + 1.5238vw, 4.5rem); /* 56 > 72, Home stats strip */
  --pellucid-section-y-uc: clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem); /* 48 > 72, Use cases closing section */
  --pellucid-filter-gap: clamp(2.5rem, 1.7571rem + 3.0476vw, 4.5rem); /* 40 > 72, above the "I am..." filter */
  --pellucid-cta-gap: clamp(4.5rem, 3.386rem + 4.571vw, 7.5rem); /* 72 > 120, above a closing section on Use cases */
  --pellucid-group-gap: var(--pellucid-space-7); /* between grouped lists */
  --pellucid-cta-top: clamp(2.75rem, 2.1rem + 2.6667vw, 4.5rem); /* 44 > 72, closing CTA on full pages */
  --pellucid-cta-bottom: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem); /* 56 > 96 */
  --pellucid-page-pad-top: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem); /* 24 > 40, above the breadcrumb and the hero on full pages */
  --pellucid-hero-gap: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem); /* 32 > 56, switcher to hero, hero to figure */
  --pellucid-intro-gap: clamp(2.25rem, 1.6rem + 2.6667vw, 4rem); /* 36 > 64, breadcrumb to switcher, hero to stats */
  --pellucid-feature-gap: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem); /* 40 > 64, rows to a case feature in the same section */
  --pellucid-feature-actions-gap: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem); /* 24 > 40, case feature to the buttons after it */
  --pellucid-group-gap: clamp(3rem, 2.1643rem + 3.4286vw, 5.25rem); /* 48 > 84, a closed run of service rows to the next practice heading */
  --pellucid-rows-actions-gap: 2.5rem; /* 40, a closed run of rows to the buttons after it (Use cases) */
  --pellucid-header-gap: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.25rem); /* 14 > 20, eyebrow to heading in a section header */
  --pellucid-marquee-pad: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem); /* 20 > 28 */
  --pellucid-header-end: var(--pellucid-space-7); /* section header to its content */
  --pellucid-header-end-full: 1.75rem; /* 28, the same on full pages */
  --pellucid-rule: 2px;
  --pellucid-hairline: 1px; /* outlined tags and buttons */
  --pellucid-optical-offset: -0.058em; /* pulls large headings onto the left edge */
  --pellucid-pad-card-y: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem); /* 24 > 36 */
  --pellucid-pad-card-x: clamp(1.25rem, 0.7857rem + 1.9048vw, 2.5rem); /* 20 > 40 */
  --pellucid-pad-feature-y: clamp(1.75rem, 1.1rem + 2.6667vw, 3.5rem); /* 28 > 56 */
  --pellucid-pad-feature-x: clamp(1.25rem, 0.4143rem + 3.4286vw, 3.5rem); /* 20 > 56 */
  --pellucid-cell-min: 13.75rem; /* 220, audience cells */
  --pellucid-avatar: 2.5rem; /* 40, "Led by" */
  --pellucid-avatar-md: 4.5rem; /* 72, who did the work */
  --pellucid-avatar-lg: clamp(4rem, 3.4429rem + 2.2857vw, 5.5rem); /* 64 > 88, practice lead */
  --pellucid-marker-sm: 0.375rem; /* 6, bullet marker */
  --pellucid-pill-h: var(--pellucid-target); /* 44, filter pills */
  --pellucid-pill-pad: var(--pellucid-space-4);
  --pellucid-pills-bleed: var(--pellucid-gutter); /* mobile pills scroll to the screen edge */
  --pellucid-media-wide: 21 / 9;
  --pellucid-media-landscape: 4 / 3;
  --pellucid-media-square: 1 / 1;
  --pellucid-stripe-width: 0.875rem; /* dev-only placeholder stripes */
  --pellucid-target: 2.75rem; /* 44, minimum target height */
  --pellucid-target-min: 1.5rem; /* 24, smallest target (WCAG 2.5.8), tag links */
  --pellucid-icon-size: 1.5rem; /* 24, inline control icons (password show/hide) */
  --pellucid-header-h: 4rem; /* 64 */
  --pellucid-col-num: 4rem; /* 64, number column of a stacked row */
  --pellucid-col-role: 11.25rem; /* 180, selected-work role column */
  --pellucid-col-meta: 13.75rem; /* 220, selected-work client column */
  --pellucid-col-link: 8.75rem; /* 140, selected-work link column */
  --pellucid-hair-gap: 0.125rem; /* 2, line gap under a name */
  --pellucid-facts-label: 7rem; /* 112, facts label column */
  --pellucid-marker: 0.625rem; /* 10, square marker */
  --pellucid-marker-lg: 0.75rem; /* 12, marquee separator */

  /* — Focus — */
  --pellucid-focus-width: 2px;
  --pellucid-focus-offset: 2px;
  --pellucid-focus-color: var(--pellucid-accent);

  /* — Motion — */
  --pellucid-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pellucid-duration: 0.45s;
  --pellucid-duration-fast: 0.25s;
  --pellucid-duration-mask: 1s;
  --pellucid-duration-rule: 1.1s;
  --pellucid-reveal-duration: var(--pellucid-duration);
  --pellucid-stagger: 90ms; /* siblings stagger 80-110ms */
  --pellucid-countup-duration: 1.4s;
  --pellucid-marquee-duration: 30s;
  --pellucid-hover-scale: 1.03;
  --pellucid-rise: -2px; /* button rise on hover */
  --pellucid-travel-up: 3rem; /* 48 */
  --pellucid-travel-side: 4.5rem; /* 72 */
  --pellucid-scale-from: 0.92;
  --pellucid-photo-duration: 0.45s;
}

/* — Page-type spacing scopes —
   Full pages (practice, case study, team member, post): 80 / 44 sections, a
   tighter header, and the closing CTA's own 72 / 96 (44 / 56). */
.pl-full {
  --pellucid-section-y: var(--pellucid-section-y-full);
  --pellucid-section-y-lg: var(--pellucid-section-y-full);
  --pellucid-cta-start: var(--pellucid-cta-top);
  --pellucid-cta-end: var(--pellucid-cta-bottom);
  --pellucid-header-gap: var(--pellucid-space-4);
  --pellucid-header-end: var(--pellucid-header-end-full);
  --pellucid-stat-pad: var(--pellucid-space-5);
  --pellucid-hero-top: var(--pellucid-page-pad-top);
  --pellucid-hero-bottom: var(--pellucid-section-y-full);
}

/* The practice hero sits under the switcher, and stats follow it. */
.pl-full--practice {
  --pellucid-hero-top: var(--pellucid-hero-gap);
  --pellucid-hero-bottom: var(--pellucid-intro-gap);
}

/* The case study hero is followed by the lead image, then the stats. */
.pl-full--project {
  --pellucid-hero-bottom: var(--pellucid-hero-gap);
}

/* Canvas pages. The scope is the main landmark so the footer keeps its own. */
body.path-frontpage main {
  --pellucid-section-y: var(--pellucid-section-y-home);
  --pellucid-section-y-lg: var(--pellucid-section-y-home);
}

body.pl-route--about main {
  --pellucid-stat-pad: var(--pellucid-space-5);
  --pellucid-section-y: var(--pellucid-section-y-md);
  --pellucid-section-y-lg: var(--pellucid-section-y-md);
}

body.pl-route--use-cases main {
  --pellucid-section-y: var(--pellucid-section-y-uc);
  --pellucid-section-y-lg: var(--pellucid-section-y-uc);
  --pellucid-hero-top: var(--pellucid-section-y-md);
  --pellucid-hero-bottom: var(--pellucid-hero-gap);
  --pellucid-group-gap: var(--pellucid-section-y-md);
  --pellucid-section-gap: var(--pellucid-cta-gap);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --pellucid-ink: #f3f2f2;
    --pellucid-paper: #201e1d;
    --pellucid-surface: #2d2b2b;
    --pellucid-neutral-100: #2d2b2b;
    --pellucid-neutral-200: #2d2b2b;
    --pellucid-neutral-700: #bab6b6;
    --pellucid-neutral-800: #d7d3d3;
    --pellucid-accent: #1f9ed9;
    --pellucid-accent-600: #4cb3e6;
    --pellucid-accent-700: #6bbde9;
    --pellucid-accent-800: #d6ecfa;
    --pellucid-accent-100: #0b3350;
    --pellucid-accent-200: #0b3350;
    --pellucid-accent-2: #6bbde9;
    --pellucid-error: #ff8a80;
    --pellucid-shadow-lift: 0 0 0 1px color-mix(in srgb, #f3f2f2 12%, transparent), 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

.dark {
  color-scheme: dark;
  --pellucid-ink: #f3f2f2;
  --pellucid-paper: #201e1d;
  --pellucid-surface: #2d2b2b;
  --pellucid-neutral-100: #2d2b2b;
  --pellucid-neutral-200: #2d2b2b;
  --pellucid-neutral-700: #bab6b6;
  --pellucid-neutral-800: #d7d3d3;
  --pellucid-accent: #1f9ed9;
  --pellucid-accent-600: #4cb3e6;
  --pellucid-accent-700: #6bbde9;
  --pellucid-accent-800: #d6ecfa;
  --pellucid-accent-100: #0b3350;
  --pellucid-accent-200: #0b3350;
  --pellucid-accent-2: #6bbde9;
  --pellucid-error: #ff8a80;
  --pellucid-shadow-lift: 0 0 0 1px color-mix(in srgb, #f3f2f2 12%, transparent), 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Declared on .dark and .light too, so the aliases re-resolve against the
   palette wherever the class is applied. */
:root,
.dark,
.light {
  /* — Component-facing tokens (shadcn/ui names) — */
  --background: var(--pellucid-paper);
  --foreground: var(--pellucid-ink);
  --card: var(--pellucid-surface);
  --card-foreground: var(--pellucid-ink);
  --primary: var(--pellucid-accent);
  --primary-foreground: var(--pellucid-paper);
  --secondary: var(--pellucid-neutral-200);
  --secondary-foreground: var(--pellucid-ink);
  --muted: var(--pellucid-neutral-100);
  --muted-foreground: var(--pellucid-neutral-700);
  --accent: var(--pellucid-accent-100);
  --accent-foreground: var(--pellucid-accent-800);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: var(--pellucid-divider);
  --input: var(--pellucid-divider);
  --ring: var(--pellucid-focus-color);
  --font-sans: var(--pellucid-font);
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: var(--pellucid-font);
  /* Modernist: square corners throughout. */
  --radius: 0px;
  /* One shadow, only on hover lift. The rest of the scale is off. */
  --shadow-2xs: none;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: var(--pellucid-shadow-lift);
  --shadow-xl: var(--pellucid-shadow-lift);
  --shadow-2xl: var(--pellucid-shadow-lift);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}