/* ==================================================================================================
 * Job Radar on the Forethink Design System — token layer (plain CSS, no Tailwind)
 *
 * The design system (../Forethink Design System) is React 19 + Tailwind v4 and ships its stylesheet
 * as Tailwind *source*, which this app — vanilla ES modules served straight from public/ with no
 * build step — cannot consume. What it can consume is the part that actually carries the visual
 * language: the `--ft-*` token tiers, the radii, the glass tiers and the brand utilities. Those are
 * plain CSS, copied here verbatim from `src/index.css`, so the skin is the system's, not a likeness
 * of it. The React components are not available to this app; its own components read these tokens.
 *
 * This file replaces carbon.css and keeps every name that file published — --color-ink, --color-line,
 * --color-interactive, --ease-productive and the rest. They are now defined from `--ft-*` using the
 * Carbon → Forethink mapping in the system's docs/APPLICATION.md §7.1, which is why one stylesheet
 * swap re-skins an app of 800 CSS rules without rewriting them.
 *
 * Theme: dark is the brand default. `data-theme="light"|"dark"` on <html> wins; with neither set the
 * page follows the operating system, which is how this app behaved before.
 *
 * Sources: docs/APPLICATION.md §3.2 (the Jobs Radar cyan theme — this product's own accent, defined
 * by the system), §7.1 (token mapping), src/index.css (every value below).
 * ================================================================================================ */

/* ---------------------------------------------------------------------------------------------
 * 1. BRAND PALETTE — the steps this app refers to by name
 * ------------------------------------------------------------------------------------------- */
:root {
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #7c3aed;
  --color-violet-600: #6d28d9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-lime-400: #a3e635;
  --color-amber-400: #fbbf24;
  --color-coral-400: #fb7185;
  --color-coral-600: #e11d48;
}

/* ---------------------------------------------------------------------------------------------
 * 2. SEMANTIC THEME VARIABLES — dark (brand default)
 * ------------------------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --ft-bg: #0a0a12;
  --ft-bg-elevated: #151521;
  --ft-bg-tertiary: #1e1e2e;
  --ft-overlay: rgba(10, 10, 18, 0.65);

  /* Glass tiers */
  --ft-glass-bg: rgba(255, 255, 255, 0.06);
  --ft-glass-border: rgba(255, 255, 255, 0.14);
  --ft-glass-strong-bg: rgba(255, 255, 255, 0.1);
  --ft-glass-strong-border: rgba(255, 255, 255, 0.2);
  --ft-elevation-1-bg: rgba(255, 255, 255, 0.04);
  --ft-elevation-1-border: rgba(255, 255, 255, 0.08);
  --ft-elevation-2-bg: rgba(255, 255, 255, 0.08);
  --ft-elevation-2-border: rgba(255, 255, 255, 0.14);
  --ft-elevation-3-bg: rgba(255, 255, 255, 0.12);
  --ft-elevation-3-border: rgba(255, 255, 255, 0.22);

  /* Foreground */
  --ft-fg: #ffffff;
  --ft-fg-muted: rgba(255, 255, 255, 0.7);
  --ft-fg-dim: rgba(255, 255, 255, 0.5);
  --ft-fg-faint: rgba(255, 255, 255, 0.35);
  --ft-fg-inverse: #0a0a12;

  /* Lines & state layers */
  --ft-line: rgba(255, 255, 255, 0.1);
  --ft-line-subtle: rgba(255, 255, 255, 0.06);
  --ft-line-strong: rgba(255, 255, 255, 0.2);
  --ft-hover: rgba(255, 255, 255, 0.08);
  --ft-active: rgba(255, 255, 255, 0.14);
  --ft-selected: rgba(167, 139, 250, 0.12);
  --ft-skeleton: rgba(255, 255, 255, 0.1);
  --ft-skeleton-shine: rgba(255, 255, 255, 0.18);

  /* Semantic accents — text-safe foreground tones per theme */
  --ft-primary: #7c3aed;
  --ft-primary-fg: #a78bfa;
  --ft-secondary: #06b6d4;
  --ft-info-fg: #22d3ee;
  --ft-success-fg: #a3e635;
  --ft-warning-fg: #fbbf24;
  --ft-danger-fg: #fb7185;
  --ft-focus: #22d3ee;
  --ft-link: #22d3ee;

  /* Gradients */
  --ft-grad-violet: linear-gradient(135deg, #7c3aed, #4f46e5);
  --ft-grad-violet-hover: linear-gradient(135deg, #6d28d9, #4338ca);
  --ft-glow-primary: rgba(124, 58, 237, 0.4);
  --ft-grad-progress: linear-gradient(90deg, #06b6d4, #3b82f6);
  --ft-grad-cyan: linear-gradient(135deg, #0e7490, #2563eb);
  --ft-grad-green: linear-gradient(135deg, #a3e635, #22c55e);
  --ft-grad-coral: linear-gradient(135deg, #e11d48, #db2777);
  --ft-grad-amber: linear-gradient(135deg, #fbbf24, #f97316);
  --ft-grad-text: linear-gradient(90deg, #a78bfa, #22d3ee, #a3e635);

  /* Shadows */
  --ft-shadow-1: 0 4px 16px rgba(0, 0, 0, 0.25);
  --ft-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.35);
  --ft-shadow-3: 0 20px 48px rgba(124, 58, 237, 0.35);
  --ft-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.55);
  --ft-shadow-header: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Layers (Carbon: background → layer-01 → layer-02 → layer-03) */
  --ft-layer-1: rgba(255, 255, 255, 0.06);
  --ft-layer-2: rgba(255, 255, 255, 0.1);
  --ft-layer-3: rgba(255, 255, 255, 0.14);

  --ft-scroll-thumb: #4c1d95;
}

/* The Jobs Radar cyan theme — docs/APPLICATION.md §3.2. The system names violet as the house
 * accent and cyan as this product's; focus moves to violet so it still contrasts the accent. */
:root {
  --ft-primary: var(--color-cyan-500);
  --ft-primary-fg: var(--color-cyan-400);
  --ft-secondary: var(--color-violet-500);
  --ft-selected: rgba(6, 182, 212, 0.14);
  --ft-focus: var(--color-violet-400);
  --ft-shadow-3: 0 20px 48px rgba(6, 182, 212, 0.3);
  --ft-scroll-thumb: #155e75;
}

/* ---------------------------------------------------------------------------------------------
 * 3. MOTION — theme-invariant
 * ------------------------------------------------------------------------------------------- */
:root {
  --ft-duration-fast-1: 70ms;
  --ft-duration-fast-2: 110ms;
  --ft-duration-moderate-1: 150ms;
  --ft-duration-moderate-2: 240ms;
  --ft-duration-slow-1: 400ms;
  --ft-duration-slow-2: 700ms;

  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);
  --ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);
}

/* ---------------------------------------------------------------------------------------------
 * 4. STATIC TOKENS — radii, blur, type stacks
 *
 * The radii are the visible skin difference from Carbon, which is square at every size
 * (docs/APPLICATION.md §7.1, last row).
 * ------------------------------------------------------------------------------------------- */
:root {
  --radius-control-sm: 0.5rem;  /*  8px — small controls, chips, tight buttons */
  --radius-control: 0.75rem;    /* 12px — buttons, inputs, menu items */
  --radius-surface: 1rem;       /* 16px — cards, tiles, popovers */
  --radius-panel: 1.5rem;       /* 24px — drawers, modals, large panels */
  --radius-full: 999px;         /* pills: tags, counts, progress tracks */

  --blur-glass-sm: 12px;
  --blur-glass: 20px;
  --blur-glass-lg: 40px;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------------------------------
 * 5. COMPONENT TOKENS — the third tier. Components read these; the product overrides them to
 *    re-skin without touching semantics.
 * ------------------------------------------------------------------------------------------- */
:root {
  --ft-button-primary-bg: var(--ft-grad-cyan); /* §3.2: cyan, and a gradient rather than a flat fill */
  --ft-button-primary-hover-bg: linear-gradient(135deg, #155e75, #1d4ed8);
  --ft-button-primary-fg: #ffffff;
  --ft-button-secondary-bg: var(--ft-glass-strong-bg);
  --ft-button-secondary-border: var(--ft-glass-strong-border);
  --ft-button-secondary-fg: var(--ft-fg);
  --ft-button-secondary-hover-bg: var(--ft-active);
  --ft-button-danger-bg: var(--ft-grad-coral);
  --ft-button-danger-hover-bg: linear-gradient(135deg, #be123c, #be185d);
  --ft-button-radius: var(--radius-control);

  --ft-input-bg: var(--ft-glass-strong-bg);
  --ft-input-fg: var(--ft-fg);
  --ft-input-placeholder: var(--ft-fg-dim);
  --ft-input-border: var(--ft-glass-strong-border);
  --ft-input-border-hover: var(--ft-line-strong);
  --ft-input-border-focus: var(--ft-primary);
  --ft-input-ring-focus: color-mix(in oklab, var(--ft-primary) 30%, transparent);
  --ft-input-border-invalid: var(--color-coral-400);
  --ft-input-radius: var(--radius-control);
}

/* ---------------------------------------------------------------------------------------------
 * 6. LIGHT THEME
 *
 * Declared once and applied from two places: an explicit data-theme="light", and the operating
 * system's preference when the page carries no explicit theme at all.
 * ------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;

    --ft-bg: #f8fafc;
    --ft-bg-elevated: #ffffff;
    --ft-bg-tertiary: #f1f5f9;
    --ft-overlay: rgba(15, 23, 42, 0.45);

    --ft-glass-bg: rgba(255, 255, 255, 0.7);
    --ft-glass-border: rgba(15, 23, 42, 0.08);
    --ft-glass-strong-bg: rgba(255, 255, 255, 0.9);
    --ft-glass-strong-border: rgba(15, 23, 42, 0.12);
    --ft-elevation-1-bg: rgba(255, 255, 255, 0.5);
    --ft-elevation-1-border: rgba(15, 23, 42, 0.06);
    --ft-elevation-2-bg: rgba(255, 255, 255, 0.75);
    --ft-elevation-2-border: rgba(15, 23, 42, 0.1);
    --ft-elevation-3-bg: rgba(255, 255, 255, 0.92);
    --ft-elevation-3-border: rgba(15, 23, 42, 0.14);

    --ft-fg: #0f172a;
    --ft-fg-muted: #475569;
    --ft-fg-dim: #56657a;
    --ft-fg-faint: #94a3b8;
    --ft-fg-inverse: #ffffff;

    --ft-line: rgba(15, 23, 42, 0.08);
    --ft-line-subtle: rgba(15, 23, 42, 0.05);
    --ft-line-strong: rgba(15, 23, 42, 0.16);
    --ft-hover: rgba(15, 23, 42, 0.04);
    --ft-active: rgba(15, 23, 42, 0.08);
    --ft-skeleton: rgba(15, 23, 42, 0.08);
    --ft-skeleton-shine: rgba(255, 255, 255, 0.6);

    --ft-secondary: #0891b2;
    --ft-info-fg: #155e75;
    --ft-success-fg: #3f6212;
    --ft-warning-fg: #92400e;
    --ft-danger-fg: #be123c;

    --ft-grad-violet: linear-gradient(135deg, #7c3aed, #8650f0);
    --ft-grad-violet-hover: linear-gradient(135deg, #6d28d9, #7c3aed);
    --ft-glow-primary: #ddd6fe;
    --ft-grad-progress: linear-gradient(90deg, #7c3aed, #8650f0);
    --ft-grad-cyan: linear-gradient(135deg, #0e7490, #2563eb);
    --ft-grad-green: linear-gradient(135deg, #65a30d, #a3e635);
    --ft-grad-coral: linear-gradient(135deg, #e11d48, #db2777);
    --ft-grad-amber: linear-gradient(135deg, #d97706, #fbbf24);
    --ft-grad-text: linear-gradient(135deg, #7c3aed, #fb7185);

    --ft-shadow-1: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
    --ft-shadow-2: 0 8px 32px -8px rgba(0, 0, 0, 0.1);
    --ft-shadow-overlay: 0 24px 64px rgba(15, 23, 42, 0.18);
    --ft-shadow-header: 0 8px 32px rgba(31, 38, 135, 0.06);

    --ft-layer-1: rgba(255, 255, 255, 0.65);
    --ft-layer-2: rgba(255, 255, 255, 0.9);
    --ft-layer-3: #ffffff;

    --ft-input-border-invalid: var(--color-coral-600);
    --ft-input-placeholder: var(--ft-fg-dim);

    /* §3.2, light half */
    --ft-primary: var(--color-cyan-600);
    --ft-primary-fg: var(--color-cyan-700);
    --ft-selected: rgba(8, 145, 178, 0.1);
    --ft-focus: var(--color-violet-600);
    --ft-link: var(--color-cyan-700);
    --ft-shadow-3: 0 20px 48px rgba(8, 145, 178, 0.16);
    --ft-scroll-thumb: rgba(15, 23, 42, 0.18);
    --ft-button-primary-hover-bg: linear-gradient(135deg, #155e75, #1d4ed8);
  }
}

:root[data-theme='light'] {
  color-scheme: light;

  --ft-bg: #f8fafc;
  --ft-bg-elevated: #ffffff;
  --ft-bg-tertiary: #f1f5f9;
  --ft-overlay: rgba(15, 23, 42, 0.45);

  --ft-glass-bg: rgba(255, 255, 255, 0.7);
  --ft-glass-border: rgba(15, 23, 42, 0.08);
  --ft-glass-strong-bg: rgba(255, 255, 255, 0.9);
  --ft-glass-strong-border: rgba(15, 23, 42, 0.12);
  --ft-elevation-1-bg: rgba(255, 255, 255, 0.5);
  --ft-elevation-1-border: rgba(15, 23, 42, 0.06);
  --ft-elevation-2-bg: rgba(255, 255, 255, 0.75);
  --ft-elevation-2-border: rgba(15, 23, 42, 0.1);
  --ft-elevation-3-bg: rgba(255, 255, 255, 0.92);
  --ft-elevation-3-border: rgba(15, 23, 42, 0.14);

  --ft-fg: #0f172a;
  --ft-fg-muted: #475569;
  --ft-fg-dim: #56657a;
  --ft-fg-faint: #94a3b8;
  --ft-fg-inverse: #ffffff;

  --ft-line: rgba(15, 23, 42, 0.08);
  --ft-line-subtle: rgba(15, 23, 42, 0.05);
  --ft-line-strong: rgba(15, 23, 42, 0.16);
  --ft-hover: rgba(15, 23, 42, 0.04);
  --ft-active: rgba(15, 23, 42, 0.08);
  --ft-skeleton: rgba(15, 23, 42, 0.08);
  --ft-skeleton-shine: rgba(255, 255, 255, 0.6);

  --ft-secondary: #0891b2;
  --ft-info-fg: #155e75;
  --ft-success-fg: #3f6212;
  --ft-warning-fg: #92400e;
  --ft-danger-fg: #be123c;

  --ft-grad-violet: linear-gradient(135deg, #7c3aed, #8650f0);
  --ft-grad-violet-hover: linear-gradient(135deg, #6d28d9, #7c3aed);
  --ft-glow-primary: #ddd6fe;
  --ft-grad-progress: linear-gradient(90deg, #7c3aed, #8650f0);
  --ft-grad-cyan: linear-gradient(135deg, #0e7490, #2563eb);
  --ft-grad-green: linear-gradient(135deg, #65a30d, #a3e635);
  --ft-grad-coral: linear-gradient(135deg, #e11d48, #db2777);
  --ft-grad-amber: linear-gradient(135deg, #d97706, #fbbf24);
  --ft-grad-text: linear-gradient(135deg, #7c3aed, #fb7185);

  --ft-shadow-1: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  --ft-shadow-2: 0 8px 32px -8px rgba(0, 0, 0, 0.1);
  --ft-shadow-overlay: 0 24px 64px rgba(15, 23, 42, 0.18);
  --ft-shadow-header: 0 8px 32px rgba(31, 38, 135, 0.06);

  --ft-layer-1: rgba(255, 255, 255, 0.65);
  --ft-layer-2: rgba(255, 255, 255, 0.9);
  --ft-layer-3: #ffffff;

  --ft-input-border-invalid: var(--color-coral-600);
  --ft-input-placeholder: var(--ft-fg-dim);

  --ft-primary: var(--color-cyan-600);
  --ft-primary-fg: var(--color-cyan-700);
  --ft-selected: rgba(8, 145, 178, 0.1);
  --ft-focus: var(--color-violet-600);
  --ft-link: var(--color-cyan-700);
  --ft-shadow-3: 0 20px 48px rgba(8, 145, 178, 0.16);
  --ft-scroll-thumb: rgba(15, 23, 42, 0.18);
  --ft-button-primary-hover-bg: linear-gradient(135deg, #155e75, #1d4ed8);
}

/* ==================================================================================================
 * 7. THE CARBON NAMES THIS APP ALREADY SPEAKS
 *
 * Every variable carbon.css published, redefined from `--ft-*` by the mapping in §7.1 of the
 * system's APPLICATION.md. Because `--ft-*` already carries the theme, these need declaring once:
 * there is no second light/dark block here, which is the whole point of a semantic tier.
 * ================================================================================================ */
:root {
  /* Surfaces and text */
  --color-canvas: var(--ft-bg);                 /* $background        → --ft-bg */
  --color-surface: var(--ft-bg-elevated);       /* $layer-01          → glass tiers, solid fallback */
  --color-surface-hover: var(--ft-hover);       /* $layer-hover-01    → bg-hover */
  --color-layer-accent: var(--ft-bg-tertiary);  /* $layer-accent-01   → bg-tertiary */
  --color-ink: var(--ft-fg);                    /* $text-primary      → text-fg */
  --color-ink-soft: var(--ft-fg-muted);         /* $text-secondary    → text-fg-muted */
  --color-muted: var(--ft-fg-dim);              /* $text-helper       → text-fg-dim */
  --color-line: var(--ft-line);                 /* $border-subtle     → border-line */
  --color-line-strong: var(--ft-line-strong);   /* $border-strong     → border-line-strong */
  --color-inverse-surface: var(--ft-fg);        /* $background-inverse */
  --color-inverse-ink: var(--ft-fg-inverse);    /* $text-inverse */
  --color-overlay: var(--ft-overlay);           /* $overlay           → bg-overlay */

  /* Interactive vs link — the distinction carbon.css insisted on, kept: the first is a fill that
   * carries white text, the second is text that has to stay legible on the page behind it. */
  --color-interactive: var(--ft-primary);       /* $interactive / $button-primary */
  --color-interactive-hover: var(--color-cyan-700);
  --color-link: var(--ft-link);                 /* $link-primary      → text-info */

  /* Focus. Violet against this product's cyan accent, per §3.2. */
  --color-brand-500: var(--ft-focus);
  --color-brand-50: color-mix(in oklab, var(--ft-primary) 8%, transparent);
  --color-brand-100: var(--ft-selected);
  --color-brand-200: color-mix(in oklab, var(--ft-primary) 24%, transparent);
  --color-brand-300: var(--ft-primary-fg);
  --color-brand-400: var(--ft-primary-fg);

  /* Buttons */
  --color-btn-primary-hover: var(--color-cyan-700);
  --color-btn-secondary: var(--ft-glass-strong-bg);
  --color-btn-secondary-hover: var(--ft-active);
  --color-btn-danger: var(--color-coral-600);
  --color-btn-danger-hover: #9f1239;

  /* Status. The foreground tones are the system's per-theme text-safe stops; the tint behind each
   * is that tone mixed into the elevated surface rather than into transparency, so a badge keeps
   * its contrast wherever it is stacked — on the page, on a glass card, inside a popover. One
   * declaration serves both themes because both halves of the mix are already theme-aware. */
  --color-support-error: var(--ft-danger-fg);
  --color-support-error-bg: color-mix(in oklab, var(--ft-danger-fg) 16%, var(--ft-bg-elevated));
  --color-support-warning-major: var(--ft-warning-fg);
  --color-support-warning-major-bg: color-mix(in oklab, var(--ft-warning-fg) 16%, var(--ft-bg-elevated));
  --color-support-warning: var(--ft-warning-fg);
  --color-support-warning-bg: color-mix(in oklab, var(--ft-warning-fg) 16%, var(--ft-bg-elevated));
  --color-support-info: var(--ft-info-fg);
  --color-support-info-bg: color-mix(in oklab, var(--ft-info-fg) 16%, var(--ft-bg-elevated));
  --color-support-success: var(--ft-success-fg);
  --color-support-success-bg: color-mix(in oklab, var(--ft-success-fg) 16%, var(--ft-bg-elevated));

  /* A surface that floats OVER content — a menu, a popover, a drawer — is glass, but it still has
   * to hide what it covers. The elevation tints alone are 4–12% white, which blurs the text behind
   * without obscuring it, so these panels take the elevated background at 96% instead and keep the
   * blur for the edge. Tiles that sit IN the page (a job card) stay on the thin tints. */
  --ft-panel-bg: color-mix(in oklab, var(--ft-bg-elevated) 96%, transparent);

  /* Elevation. Carbon reserved shadow for overlays; the system gives every tier one. */
  --shadow-card: var(--ft-shadow-1);
  --shadow-sm: var(--ft-shadow-1);
  --shadow-pop: var(--ft-shadow-2);

  /* Motion — the same three curves, now named by the system's scale. */
  --ease-productive: var(--ease-standard-productive);
  --ease-entrance: var(--ease-entrance-productive);
  --ease-exit: var(--ease-exit-productive);
}

/* ==================================================================================================
 * 8. BASE
 * ================================================================================================ */
html {
  /* Glass needs something to refract. Two fixed, very low-opacity glows — the system's GlowBlob,
   * flattened into the page — give the panels above them something other than flat paint to sit on.
   * They live on <html> so the body's own background never paints over them. */
  background-color: var(--ft-bg);
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, color-mix(in oklab, var(--ft-primary) 20%, transparent), transparent 70%),
    radial-gradient(52rem 36rem at 88% 6%, color-mix(in oklab, var(--ft-secondary) 16%, transparent), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: transparent; /* the page's glow lives on <html> */
  color: var(--ft-fg);
  font-family: var(--font-sans);
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

::selection {
  background: color-mix(in oklab, var(--ft-primary) 40%, transparent);
  color: var(--ft-fg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ft-scroll-thumb); border-radius: 10px; }

/* The system's focus indicator: 2px, offset outwards rather than inset, in --ft-focus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ft-focus);
  outline-offset: 2px;
}

dialog::backdrop { background: var(--ft-overlay); }
body:has(dialog[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================================================
 * 9. BRAND UTILITIES — the @utility blocks of src/index.css as plain classes
 * ================================================================================================ */
.glass {
  background: var(--ft-glass-bg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--ft-glass-border);
}
.glass-sm {
  background: var(--ft-glass-bg);
  backdrop-filter: blur(var(--blur-glass-sm));
  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
  border: 1px solid var(--ft-glass-border);
}
.glass-strong {
  background: var(--ft-glass-strong-bg);
  backdrop-filter: blur(var(--blur-glass-lg));
  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
  border: 1px solid var(--ft-glass-strong-border);
}
.elevation-1 {
  background: var(--ft-elevation-1-bg);
  backdrop-filter: blur(var(--blur-glass-sm));
  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
  border: 1px solid var(--ft-elevation-1-border);
  box-shadow: var(--ft-shadow-1);
}
.elevation-2 {
  background: var(--ft-elevation-2-bg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--ft-elevation-2-border);
  box-shadow: var(--ft-shadow-2);
}
.elevation-3 {
  background: var(--ft-elevation-3-bg);
  backdrop-filter: blur(var(--blur-glass-lg));
  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
  border: 1px solid var(--ft-elevation-3-border);
  box-shadow: var(--ft-shadow-3);
}
.grad-violet { background-image: var(--ft-grad-violet); }
.grad-cyan { background-image: var(--ft-grad-cyan); }
.grad-green { background-image: var(--ft-grad-green); }
.grad-coral { background-image: var(--ft-grad-coral); }
.grad-amber { background-image: var(--ft-grad-amber); }
.text-gradient {
  background-image: var(--ft-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fractal noise at 3%, over glass panels. */
.noise { position: relative; }
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}