@layer reset, tokens, elements, layout, components, patterns, pages, utilities, overrides, system, page-finishes;

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-ext-500.woff2") format("woff2");
  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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/eb-garamond-latin-ext-500.woff2") format("woff2");
  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: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/eb-garamond-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sairik Display CJK";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Songti SC"), local("STSong"), local("SimSun");
  unicode-range: U+3000-303F, U+3040-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@layer tokens {
  /*
   * Sairik Labs design tokens.
   *
   * Structure
   *   1. Palette      raw ramps, never referenced by components directly
   *   2. Roles        semantic names that components consume
   *   3. Surfaces     `.surface-marketing` / `.surface-app` re-point the roles
   *   4. Aliases      legacy names kept so existing stylesheets keep resolving
   *
   * Rules
   *   - Components read role tokens only (--color-*, --fs-*, --sp-*, --r-*, --elev-*).
   *   - A page may re-point a role token; it may not invent a raw colour.
   *   - Shadows express elevation above the page, not decoration.
   */
  :root {
    color-scheme: light;

    /* ---------------------------------------------------------------- *
     * 1. Palette
     * ---------------------------------------------------------------- */

    /* Warm paper ramp — marketing surfaces */
    --w-00: oklch(99.2% 0.006 88);
    --w-05: oklch(98.1% 0.007 88);
    --w-10: oklch(96.6% 0.009 88);
    --w-20: oklch(94.4% 0.011 88);
    --w-30: oklch(90.8% 0.012 88);
    --w-40: oklch(86.5% 0.013 88);

    /* Neutral ramp — application surfaces */
    --n-00: oklch(100% 0 0);
    --n-05: oklch(98.4% 0.002 130);
    --n-10: oklch(97% 0.003 130);
    --n-20: oklch(94.6% 0.004 130);
    --n-30: oklch(91.4% 0.005 130);
    --n-40: oklch(86% 0.006 130);
    --n-50: oklch(74% 0.007 130);

    /* Ink ramp — text and dark surfaces, tinted toward the brand hue */
    --ink-95: oklch(15.5% 0.017 162);
    --ink-90: oklch(20.5% 0.019 162);
    --ink-80: oklch(27% 0.018 162);
    --ink-70: oklch(35.5% 0.016 162);
    --ink-60: oklch(44% 0.014 162);
    --ink-50: oklch(51% 0.012 162);
    --ink-40: oklch(63% 0.010 162);
    --ink-30: oklch(72% 0.009 162);

    /* Brand — forest */
    --brand-90: oklch(24% 0.045 160);
    --brand-80: oklch(33% 0.070 159);
    --brand-70: oklch(41% 0.087 158);
    --brand-60: oklch(48% 0.094 157);
    --brand-50: oklch(58% 0.090 157);
    --brand-20: oklch(88% 0.045 157);
    --brand-10: oklch(94.5% 0.026 157);
    --brand-05: oklch(97.2% 0.014 157);

    /* Signature — terracotta. Emphasis only, never a default. */
    --sig-70: oklch(52% 0.130 42);
    --sig-60: oklch(62% 0.140 44);
    --sig-50: oklch(72% 0.120 48);
    --sig-20: oklch(91% 0.048 52);
    --sig-10: oklch(95.6% 0.026 54);

    /* Status */
    --ok-70: oklch(43% 0.115 155);
    --ok-60: oklch(52% 0.130 155);
    --ok-20: oklch(89% 0.055 155);
    --ok-10: oklch(95.6% 0.030 155);
    --warn-70: oklch(48% 0.105 70);
    --warn-60: oklch(60% 0.130 72);
    --warn-20: oklch(90% 0.070 78);
    --warn-10: oklch(96% 0.038 80);
    --err-70: oklch(45% 0.170 26);
    --err-60: oklch(54% 0.195 27);
    --err-20: oklch(89% 0.055 24);
    --err-10: oklch(95.8% 0.028 22);
    --info-70: oklch(45% 0.125 250);
    --info-60: oklch(54% 0.140 252);
    --info-20: oklch(89% 0.048 250);
    --info-10: oklch(96% 0.024 250);

    /* ---------------------------------------------------------------- *
     * 2. Role tokens — the contract components code against
     * ---------------------------------------------------------------- */

    /* Backgrounds. `canvas` is the page, `surface` sits on it,
       `raised` sits on a surface, `sunken` recedes into one. */
    --color-canvas: var(--w-05);
    --color-canvas-alt: var(--w-10);
    --color-surface: var(--w-00);
    --color-surface-raised: var(--w-00);
    --color-surface-sunken: var(--w-10);
    --color-surface-hover: var(--w-10);
    --color-surface-active: var(--w-20);
    --color-surface-inverse: var(--ink-90);
    --color-surface-brand: var(--brand-05);

    /* Lines. `border` outlines a container, `divider` separates siblings,
       `control-border` is the heavier line an input needs to read as editable. */
    --color-border: var(--w-30);
    --color-border-strong: var(--w-40);
    --color-border-subtle: var(--w-20);
    --color-divider: var(--w-20);
    --color-control-border: oklch(83% 0.012 88);
    --color-control-border-hover: oklch(72% 0.014 88);
    --color-control-border-disabled: var(--w-20);

    /* Text */
    --color-text: var(--ink-90);
    --color-text-secondary: var(--ink-70);
    --color-text-muted: var(--ink-50);
    /* Small secondary text keeps the same readable contrast floor. */
    --color-text-faint: var(--ink-50);
    --color-text-inverse: var(--w-00);
    --color-text-inverse-muted: oklch(80% 0.012 162);
    --color-text-brand: var(--brand-70);

    /* Brand + interaction */
    --color-brand: var(--brand-70);
    --color-brand-strong: var(--brand-80);
    --color-brand-soft: var(--brand-10);
    --color-brand-faint: var(--brand-05);
    --color-brand-border: var(--brand-20);
    --color-action: var(--ink-90);
    --color-action-hover: var(--ink-95);
    --color-action-text: var(--w-00);
    --color-signature: var(--sig-70);
    --color-signature-soft: var(--sig-10);
    --color-signature-border: var(--sig-20);
    --color-link: var(--brand-70);
    --color-link-hover: var(--brand-80);
    --color-focus: var(--brand-60);

    /* Status roles: `-fg` for text/icon, `-bg` for tint, `-line` for border */
    --color-success-fg: var(--ok-70);
    --color-success-bg: var(--ok-10);
    --color-success-line: var(--ok-20);
    --color-warning-fg: var(--warn-70);
    --color-warning-bg: var(--warn-10);
    --color-warning-line: var(--warn-20);
    --color-danger-fg: var(--err-70);
    --color-danger-bg: var(--err-10);
    --color-danger-line: var(--err-20);
    --color-info-fg: var(--info-70);
    --color-info-bg: var(--info-10);
    --color-info-line: var(--info-20);
    --color-neutral-fg: var(--ink-60);
    --color-neutral-bg: var(--w-10);
    --color-neutral-line: var(--w-30);

    --color-overlay: oklch(20.5% 0.019 162 / 0.44);
    --color-scrim: oklch(20.5% 0.019 162 / 0.72);

    /* ---------------------------------------------------------------- *
     * 3. Typography
     * ---------------------------------------------------------------- */
    --font-display: "Cormorant Garamond", "EB Garamond", "Sairik Display CJK", Georgia, serif;
    --font-display-cjk: "Sairik Display CJK", "Songti SC", "STSong", "SimSun", serif;
    --font-body:
      "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    /* Numeric data reuses the body face with lining tabular figures so
       columns of numbers align without switching typeface. */
    --font-numeric: var(--font-body);
    --numeric-features: "tnum" 1, "lnum" 1, "ss01" 1;

    --fs-3xs: 0.625rem;
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.875rem;
    --fs-md: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.375rem;
    --fs-5xl: 3rem;
    --fs-display: clamp(2.5rem, 4.4vw + 0.9rem, 4.25rem);
    --fs-display-sm: clamp(1.9rem, 2.6vw + 0.9rem, 2.9rem);

    --lh-tight: 1.1;
    --lh-heading: 1.22;
    --lh-snug: 1.4;
    --lh-body: 1.6;
    --lh-relaxed: 1.72;
    --lh-control: 1.2;

    --tracking-display: -0.022em;
    --tracking-heading: -0.014em;
    --tracking-body: 0em;
    --tracking-label: 0.005em;
    --tracking-caps: 0.075em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --measure-reading: 68ch;
    --measure-lede: 56ch;
    --measure-form: 34rem;

    /* ---------------------------------------------------------------- *
     * 4. Space, shape, elevation, motion
     * ---------------------------------------------------------------- */
    --sp-0: 0;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;
    --sp-half: 0.125rem;

    /* Radii scale with the size of the thing they wrap. A badge and a
       dialog should not share a corner. */
    --r-xs: 0.25rem;
    --r-sm: 0.375rem;
    --r-md: 0.5rem;
    --r-lg: 0.75rem;
    --r-xl: 1rem;
    --r-2xl: 1.5rem;
    --r-pill: 999px;
    --r-control: var(--r-sm);
    --r-card: var(--r-lg);
    --r-panel: var(--r-lg);
    --r-dialog: var(--r-xl);
    --r-badge: var(--r-xs);

    /* Elevation. Only menus, dialogs and dragged objects leave the page. */
    --elev-0: none;
    --elev-1: 0 1px 2px oklch(20.5% 0.019 162 / 0.05);
    --elev-2:
      0 1px 2px oklch(20.5% 0.019 162 / 0.05), 0 2px 6px -1px oklch(20.5% 0.019 162 / 0.06);
    --elev-3:
      0 2px 4px -2px oklch(20.5% 0.019 162 / 0.06), 0 10px 20px -6px oklch(20.5% 0.019 162 / 0.1);
    --elev-4:
      0 4px 8px -4px oklch(20.5% 0.019 162 / 0.08), 0 20px 40px -12px oklch(20.5% 0.019 162 / 0.16);

    --ring-width: 2px;
    --ring-offset: 2px;
    --ring-color: color-mix(in oklab, var(--color-focus) 55%, transparent);
    --focus-ring: 0 0 0 var(--ring-width) var(--ring-color);

    --control-h-xs: 1.75rem;
    --control-h-sm: 2rem;
    --control-h-md: 2.25rem;
    --control-h-lg: 2.625rem;
    --control-h-xl: 3rem;

    --dur-instant: 90ms;
    --dur-fast: 150ms;
    --dur-normal: 220ms;
    --dur-slow: 360ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

    /* One ladder, strictly increasing. Nothing may sit between two steps. */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-dialog: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-skip: 800;

    /* ---------------------------------------------------------------- *
     * 5. Layout structure
     * ---------------------------------------------------------------- */
    --bp-xs: 30rem;
    --bp-sm: 48rem;
    --bp-md: 64rem;
    --bp-lg: 80rem;
    --bp-xl: 96rem;

    --shell-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --shell-content-max: 78rem;
    --shell-prose-max: 46rem;
    --shell-wide-max: 90rem;
    --shell-sidebar-w: 15rem;
    --shell-sidebar-w-collapsed: 3.5rem;
    --shell-topbar-h: 3.25rem;
    --shell-mobilenav-h: 3.5rem;
    --shell-inspector-w: clamp(19rem, 23vw, 24rem);
  }

  /* -------------------------------------------------------------------- *
   * Surface modes
   *
   * Marketing keeps the warm paper. Application surfaces switch to the
   * neutral ramp, drop the serif, tighten the body size and firm up the
   * borders — the register a working tool needs.
   * -------------------------------------------------------------------- */
  .shell-app-body,
  .workspace-page-body,
  .auth-page-body {
    --color-canvas: var(--n-10);
    --color-canvas-alt: var(--n-20);
    --color-surface: var(--n-00);
    --color-surface-raised: var(--n-00);
    --color-surface-sunken: var(--n-10);
    --color-surface-hover: var(--n-10);
    --color-surface-active: var(--n-20);

    --color-border: var(--n-30);
    --color-border-strong: var(--n-40);
    --color-border-subtle: var(--n-20);
    --color-divider: var(--n-20);
    --color-control-border: var(--n-40);
    --color-control-border-hover: var(--n-50);
    --color-control-border-disabled: var(--n-20);

    --color-neutral-bg: var(--n-10);
    --color-neutral-line: var(--n-30);

    /* Working surfaces read in sans at every level. */
    --font-display: var(--font-body);
    --r-card: var(--r-md);
    --r-panel: var(--r-md);
  }

  /* ImageAI leads with the signature colour: it is a creative tool, and the
     primary action should feel like one. Chrome stays on the shared brand. */
  .brand-imageai {
    /* A greyed pine green sits more quietly beside the terracotta action
       colour while keeping ImageAI's natural, dependable character. */
    --imageai-pine: #285c4d;
    --imageai-pine-strong: #1f493e;
    --color-action: var(--sig-70);
    --color-action-hover: oklch(46% 0.135 40);
    --color-action-text: var(--w-00);
    --color-focus: var(--sig-60);
    --color-brand: var(--imageai-pine);
    --color-brand-strong: var(--imageai-pine-strong);
    --color-brand-soft: color-mix(in oklab, var(--imageai-pine) 10%, var(--w-00));
    --color-brand-faint: color-mix(in oklab, var(--imageai-pine) 5%, var(--w-00));
    --color-brand-border: color-mix(in oklab, var(--imageai-pine) 24%, var(--w-00));
    --color-surface-brand: var(--color-brand-faint);
    --color-text-brand: var(--imageai-pine);
    --color-link: var(--imageai-pine);
    --color-link-hover: var(--imageai-pine-strong);
  }

  /* Studio: the dark working surface used behind image results, so that
     transparency checkerboards and light subjects both read correctly. */

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-instant: 0ms;
      --dur-fast: 0ms;
      --dur-normal: 0ms;
      --dur-slow: 0ms;
    }
  }

  /* ==================================================================== *
   * Compatibility aliases.
   *
   * Everything below maps a legacy token name onto the roles above. New
   * CSS must not use these names; they exist so the stylesheets written
   * before this system was introduced keep resolving while they are
   * migrated file by file.
   * ==================================================================== */
  :root,
  .shell-app-body,
  .workspace-page-body,
  .auth-page-body {
    --color-paper: var(--color-surface);
    --color-paper-2: var(--color-canvas);
    --color-paper-3: var(--color-canvas-alt);
    --color-ink: var(--color-text);
    --color-ink-2: var(--color-text-secondary);
    --color-muted: var(--color-text-muted);
    --color-muted-strong: var(--color-text-muted);
    --color-text-tertiary: var(--color-text-muted);
    --color-rule: var(--color-border);
    --color-rule-2: var(--color-border-strong);
    --color-accent: var(--color-brand);
    --color-accent-hover: var(--color-brand-strong);
    --color-accent-soft: var(--color-brand-soft);
    --color-accent-ink: var(--color-text-inverse);
    --color-feature: var(--color-signature);
    --color-feature-soft: var(--color-signature-soft);
    --color-on-dark: var(--color-text-inverse);
    --color-on-dark-muted: var(--color-text-inverse-muted);
    --color-on-action: var(--color-action-text);
    --color-shadow-subtle: oklch(20.5% 0.019 162 / 0.06);
    --color-shadow-raised: oklch(20.5% 0.019 162 / 0.08);
    --color-shadow-modal: oklch(20.5% 0.019 162 / 0.14);

    --color-success: var(--color-success-fg);
    --color-success-soft: var(--color-success-bg);
    --color-warning: var(--color-warning-fg);
    --color-warning-soft: var(--color-warning-bg);
    --color-danger: var(--color-danger-fg);
    --color-danger-soft: var(--color-danger-bg);
    --color-info: var(--color-info-fg);
    --color-info-soft: var(--color-info-bg);

    --brand-cream-50: var(--color-canvas);
    --brand-cream-100: var(--color-canvas-alt);
    --brand-cream-200: var(--color-border);
    --brand-paper: var(--color-surface);
    --brand-ink-900: var(--color-text);
    --brand-ink-700: var(--color-text-secondary);
    --brand-ink-500: var(--color-text-muted);
    --brand-forest-800: var(--color-brand-strong);
    --brand-forest-700: var(--color-brand);
    --brand-forest-100: var(--color-brand-soft);
    --brand-mint-50: var(--color-success-bg);
    --brand-coral-600: var(--color-signature);
    --brand-coral-100: var(--color-signature-soft);
    --brand-red-700: var(--color-danger-fg);
    --brand-red-50: var(--color-danger-bg);
    --brand-amber-700: var(--color-warning-fg);
    --brand-amber-50: var(--color-warning-bg);
    --brand-blue-700: var(--color-info-fg);
    --brand-blue-50: var(--color-info-bg);

    --color-page: var(--color-canvas);
    --color-surface-muted: var(--color-canvas-alt);
    --color-text-subtle: var(--color-text-muted);
    --color-border-control: var(--color-control-border);

    --background: var(--color-canvas);
    --foreground: var(--color-text);
    --card: var(--color-surface);
    --card-foreground: var(--color-text);
    --primary: var(--color-action);
    --primary-hover: var(--color-action-hover);
    --primary-foreground: var(--color-action-text);
    --secondary: var(--color-text);
    --secondary-foreground: var(--color-canvas);
    --muted: var(--color-canvas-alt);
    --muted-foreground: var(--color-text-muted);
    --accent: var(--color-brand);
    --accent-2: var(--color-brand-soft);
    --border: var(--color-border);
    --danger: var(--color-danger-fg);
    --popover: var(--color-surface-raised);
    --popover-foreground: var(--color-text);
    --input: var(--color-control-border);
    --ring: var(--color-focus);
    --destructive: var(--color-danger-fg);
    --destructive-foreground: var(--color-action-text);
    --workspace-shell: var(--color-canvas);
    --bg: var(--color-canvas);
    --surface: var(--color-surface);
    --surface-2: var(--color-canvas-alt);
    --surface-muted: var(--color-canvas-alt);
    --surface-subtle: var(--color-canvas);
    --surface-accent: var(--color-brand-soft);
    --surface-raised: var(--color-surface-raised);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-strong: var(--color-text);
    --line: var(--color-border);
    --border-strong: var(--color-border-strong);
    --border-subtle: var(--color-border-subtle);
    --skin-hero-surface: var(--color-canvas);
    --serif: var(--font-display);
    --sans: var(--font-body);
    --font-serif: var(--font-display);
    --font-sans: var(--font-body);
    --font-outlier: var(--font-mono);

    --text-xs: var(--fs-xs);
    --text-sm: var(--fs-base);
    --text-base: 1rem;
    --text-md: var(--fs-xl);
    --text-lg: var(--fs-2xl);
    --text-xl: var(--fs-3xl);
    --text-2xl: var(--fs-4xl);
    --text-3xl: var(--fs-5xl);
    --text-display: var(--fs-display);
    --text-hero: var(--fs-display);
    --text-page-title: var(--fs-display-sm);
    --text-app-title: var(--fs-2xl);
    --text-section-title: var(--fs-4xl);
    --text-card-title: var(--fs-xl);
    --text-body: 1rem;
    --text-label: var(--fs-base);
    --text-meta: var(--fs-xs);
    --leading-display: var(--lh-tight);
    --leading-heading: var(--lh-heading);
    --leading-body: var(--lh-body);
    --leading-control: var(--lh-control);

    --space-3xs: var(--sp-half);
    --space-2xs: var(--sp-1);
    --space-xs: var(--sp-2);
    --space-sm: var(--sp-3);
    --space-md: var(--sp-4);
    --space-lg: var(--sp-6);
    --space-xl: var(--sp-10);
    --space-2xl: var(--sp-16);
    --space-3xl: var(--sp-24);
    --space-1: var(--sp-1);
    --space-2: var(--sp-2);
    --space-3: var(--sp-3);
    --space-4: var(--sp-4);
    --space-5: var(--sp-5);
    --space-6: var(--sp-6);
    --space-8: var(--sp-8);
    --space-10: var(--sp-10);
    --space-12: var(--sp-12);
    --space-16: var(--sp-16);
    --space-20: var(--sp-20);
    --space-24: var(--sp-24);

    --radius-xs: var(--r-xs);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-input: var(--r-control);
    --radius-card: var(--r-card);
    --radius-dialog: var(--r-dialog);
    --radius-pill: var(--r-pill);
    --radius: var(--r-lg);

    --shadow-sm: var(--elev-1);
    --shadow-md: var(--elev-2);
    --shadow-lg: var(--elev-4);
    --shadow: var(--elev-4);
    --shadow-soft: var(--elev-2);
    --ui-shadow-card: var(--elev-1);

    --control-height-compact: var(--control-h-md);
    --control-height: var(--control-h-lg);
    --control-height-large: var(--control-h-xl);
    --focus-ring-width: var(--ring-width);
    --focus-ring-offset: var(--ring-offset);

    --ease-standard: var(--ease-out);
    --dur-micro: var(--dur-fast);
    --dur-short: var(--dur-normal);
    --dur-long: var(--dur-slow);
    --motion-fast: var(--dur-fast);
    --motion-normal: var(--dur-normal);

    --z-dropdown: var(--z-popover);
    --z-overlay: var(--z-dialog);
    --z-modal: var(--z-dialog);

    --breakpoint-xs: var(--bp-xs);
    --breakpoint-sm: var(--bp-sm);
    --breakpoint-md: var(--bp-md);
    --breakpoint-lg: var(--bp-lg);
  }
}