/**
 * @file theme.css
 * Mirabit brand tokens + theme variable bridge for the mirabit_com theme.
 *
 * Two layers live here:
 *  1. The full Mirabit design-system token vocabulary (raw scales, semantic
 *     aliases, typography roles, spacing, effects) — reference these when
 *     authoring Mirabit components, e.g. var(--color-brand), var(--font-h1),
 *     var(--space-8), var(--shadow-brand).
 *  2. A bridge that maps Mercury's shadcn-style slots (--primary, --background,
 *     --card, --border, …) onto Mirabit values, so every existing SDC component
 *     and Tailwind utility (bg-primary, text-foreground, border-border) renders
 *     in the Mirabit brand.
 *
 * Colours, font families, base radius and shadows are referenced by name in the
 * compiled build/main.min.css, so changes here apply WITHOUT `npm run build`.
 * (The Tailwind type scale, spacing unit and radius utilities live in
 * src/main.css @theme and DO require a rebuild.) You may copy this file to the
 * web root, next to index.php, to override in production after a cache rebuild.
 *
 * Brand law: Mirabit Orange #ea8215 is the SINGLE deliberate accent (one CTA per
 * panel, key figures, focus ring) — never a large fill. Graphite is the
 * workhorse for text and surfaces. White is the default page surface.
 */

:root {
  /* ============================================================
     1a. Brand orange scale — house colour #ea8215 = --orange-500
     ============================================================ */
  --orange-50: #fef4e9;
  --orange-100: #fce1c3;
  --orange-200: #f8c88a;
  --orange-300: #f4ad53;
  --orange-400: #f0951f;
  --orange-500: #ea8215; /* house colour / Mirabit Orange */
  --orange-600: #cc6d0d;
  --orange-700: #a4570c;
  --orange-800: #7d4310;
  --orange-900: #5d3211;

  /* Graphite (cool neutral) scale, anchored on logo grey #55565a */
  --graphite-0: #ffffff;
  --graphite-50: #f6f6f7;
  --graphite-100: #ececee;
  --graphite-200: #dadbdd;
  --graphite-300: #bcbdc1;
  --graphite-400: #909196;
  --graphite-500: #6d6e73;
  --graphite-600: #55565a; /* logo grey / Mirabit Graphite */
  --graphite-700: #404145;
  --graphite-800: #2b2c2f;
  --graphite-900: #1a1b1d;
  --graphite-950: #0e0f10;

  /* Functional accents — status/feedback only, used sparingly */
  --success-500: #2f9e63;
  --success-50: #e7f5ee;
  --warning-500: #e0a020;
  --warning-50: #fbf2dc;
  --danger-500: #d6452f;
  --danger-50: #fbeae6;
  --info-500: #2c74b8;
  --info-50: #e6f0f9;

  /* ============================================================
     1b. Semantic aliases — reference these in components
     ============================================================ */
  --color-brand: var(--orange-500);
  --color-brand-hover: var(--orange-600);
  --color-brand-press: var(--orange-700);
  --color-brand-subtle: var(--orange-50);
  --color-brand-contrast: #ffffff;

  --text-strong: var(--graphite-900);
  --text-default: var(--graphite-700);
  --text-muted: var(--graphite-500);
  --text-subtle: var(--graphite-400);
  --text-inverse: #ffffff;
  --text-brand: var(--orange-600);
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.62);

  --surface-page: #ffffff;
  --surface-subtle: var(--graphite-50);
  --surface-sunken: var(--graphite-100);
  --surface-card: #ffffff;
  --surface-inverse: var(--graphite-900);
  --surface-inverse-2: var(--graphite-800);
  --surface-brand: var(--orange-500);

  --border-subtle: var(--graphite-200);
  --border-default: var(--graphite-300);
  --border-strong: var(--graphite-400);
  --border-brand: var(--orange-500);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --focus-ring: var(--orange-500);

  /* ============================================================
     1c. Typography tokens — ONE family, hierarchy from weight + size + tracking
     ============================================================ */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em; /* uppercase eyebrows / "DIGITALE LÖSUNGEN" */
  --tracking-widest: 0.22em;

  /* Semantic type roles — use as `font: var(--font-h1)` shorthand */
  --font-display: var(--weight-extra) var(--text-6xl) / var(--leading-none) var(--font-sans);
  --font-h1: var(--weight-extra) var(--text-5xl) / var(--leading-tight) var(--font-sans);
  --font-h2: var(--weight-bold) var(--text-4xl) / var(--leading-tight) var(--font-sans);
  --font-h3: var(--weight-bold) var(--text-2xl) / var(--leading-snug) var(--font-sans);
  --font-h4: var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-sans);
  --font-body-lg: var(--weight-regular) var(--text-md) / var(--leading-relaxed) var(--font-sans);
  --font-body-base: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-sans);
  --font-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
  --font-label: var(--weight-semibold) var(--text-sm) / var(--leading-snug) var(--font-sans);
  --font-eyebrow: var(--weight-bold) var(--text-xs) / var(--leading-snug) var(--font-sans);

  /* ============================================================
     1d. Spacing, layout & radii tokens (8px grid)
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Section padding for full-viewport scroll panels */
  /* Match the header's container padding (px-4) so panel content fills the same
     width as the navbar instead of being inset by a large fluid gutter. */
  --pad-panel-x: 1rem;
  --pad-panel-y: clamp(20px, 3.6vh, 56px);

  /* Content widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1360px;

  /* Radii — architectural / mostly square */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 6px; /* controls / inputs / buttons */
  --radius-md: 10px;
  --radius-lg: 16px; /* cards */
  --radius-xl: 24px;
  --radius-pill: 999px; /* tags only */

  /* Border widths */
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-accent: 3px; /* the orange chevron accent weight */

  /* ============================================================
     1e. Effects — shadows (warm-tinted, never pure black), blur, motion
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(26, 27, 29, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 27, 29, 0.07);
  --shadow-md: 0 8px 24px rgba(26, 27, 29, 0.1);
  --shadow-lg: 0 18px 50px rgba(26, 27, 29, 0.14);
  --shadow-xl: 0 32px 80px rgba(26, 27, 29, 0.18);
  --shadow-brand: 0 14px 36px rgba(234, 130, 21, 0.3); /* primary CTA hover glow */
  --shadow-inset: inset 0 1px 2px rgba(26, 27, 29, 0.08);

  /* Frosted-glass blur scale. Namespaced as --frost-* on purpose: the names
     --blur-sm/md/lg collide with Tailwind v4's built-in blur scale tokens,
     which must hold a bare length (e.g. 12px) because utilities wrap them as
     blur(var(--blur-md)). Storing the full blur() here produced
     blur(blur(14px)) on .backdrop-blur-md → invalid → the translucent navbar
     lost its backdrop blur, so sharp form-field lines bled through it. */
  --frost-sm: blur(6px);
  --frost-md: blur(14px); /* translucent nav bar */
  --frost-lg: blur(28px);
  --scrim: rgba(14, 15, 16, 0.55);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1); /* emphasised panel slide-in */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 440ms;
  --dur-panel: 720ms;
  --transition-base: all var(--dur-base) var(--ease-out);

  /* ============================================================
     2. Bridge — Mercury / shadcn slots mapped to Mirabit (LIGHT)
     ============================================================ */
  --background: var(--surface-page); /* white */
  --foreground: var(--text-default); /* graphite-700 body */
  --card: var(--surface-card); /* white card on hairline border */
  --card-foreground: var(--text-strong); /* graphite-900 */
  --primary: var(--color-brand); /* orange #ea8215 */
  --primary-foreground: var(--color-brand-contrast); /* white */
  --secondary: var(--graphite-100);
  --secondary-foreground: var(--graphite-800);
  --muted: var(--surface-subtle); /* graphite-50 */
  --muted-foreground: var(--text-muted); /* graphite-500 */
  --accent: var(--orange-500); /* active / focus accent = orange */
  --accent-foreground: #ffffff;
  --destructive: var(--danger-500);
  --destructive-foreground: #ffffff;
  --border: var(--border-subtle); /* graphite-200 hairline */
  --input: var(--border-default); /* graphite-300 */

  /* Font roles — one family carries everything */
  --font-sans: "Mirabit Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Mirabit Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Base radius (referenced where var(--radius) is used directly) = card radius */
  --radius: 16px;

  /* Elevation aliases consumed by Tailwind shadow-* utilities (Mirabit-tinted) */
  --shadow-2xs: var(--shadow-xs);
  --shadow: var(--shadow-sm);
  --shadow-2xl: var(--shadow-xl);

  --spacing: 0.25rem;

  /* Navbar height for hero-billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* ============================================================
   Bridge — Mercury / shadcn slots mapped to Mirabit (DARK)
   Dark panels use graphite-900/950 (never pure black); orange stays orange.
   ============================================================ */
.dark {
  --background: var(--graphite-900);
  --foreground: var(--text-on-dark);
  --card: var(--surface-inverse-2); /* graphite-800 */
  --card-foreground: var(--text-on-dark);
  --primary: var(--color-brand); /* orange stays orange on dark */
  --primary-foreground: var(--color-brand-contrast);
  --secondary: var(--graphite-800);
  --secondary-foreground: var(--text-on-dark);
  --muted: var(--graphite-800);
  --muted-foreground: var(--text-on-dark-muted);
  --accent: var(--orange-500);
  --accent-foreground: #ffffff;
  --destructive: var(--danger-500);
  --destructive-foreground: #ffffff;
  --border: var(--border-on-dark);
  --input: var(--border-on-dark);

  --font-sans: "Mirabit Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Mirabit Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --radius: 16px;

  /* Slightly deeper elevation on dark grounds */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
  --shadow-2xs: var(--shadow-xs);
  --shadow: var(--shadow-sm);
  --shadow-2xl: var(--shadow-xl);
}