/* ============================================
   DESIGN TOKENS
   Generated by Studio v5.0.0
   ============================================ */

:root {
  /* Preset Meta */
  --preset: "signature";
  --density: "balanced";
  --sp-scale: 1;

  /* Brand Colors */
  --c-brand-primary: #134e4a;
  --c-brand-accent: #d97706;
  --c-primary: #134e4a;
  --c-primary-light: #175e59;
  --c-primary-dark: #0f3e3b;
  --c-accent: #d97706;
  --c-accent-light: #ff8f07;
  --c-accent-dark: #ae5f05;

  /* QA: A-3 — Accessible text on primary background */
  --c-on-primary: #ffffff;

  /* RGB for modern alpha colors */
  --c-primary-rgb: 19 78 74;
  --c-accent-rgb: 217 119 6;

  /* Neutral Colors (Elite) */
  --c-white: #ffffff;
  --c-white-rgb: 255 255 255;
  --c-black: #000000;
  --c-black-rgb: 0 0 0;
  --c-bg: #0b0b0f;
  --c-bg-alt: #111118;
  --c-text: #f4f4f5;
  --c-text-light: #d4d4d8;
  --c-text-muted: #a1a1aa;
  --c-border: #27272a;
  --c-border-light: #1f1f23;

  /* Surfaces */
  --c-surface: rgba(var(--c-white-rgb, 255 255 255) / 0.75);
  --c-surface-strong: rgba(var(--c-white-rgb, 255 255 255) / 0.92);

  /* Effects */
  --fx-ambient-opacity: 0.85;

  /* Signature Frame (optional) */
  --edge-width: 0px;
  --edge-color-a: transparent;
  --edge-color-b: transparent;

  /* Typography */
  --font-body: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-display: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Font Sizes */
  --text-xs: clamp(calc(0.75rem * var(--sp-scale)), 1vw, calc(0.8rem * var(--sp-scale)));
  --text-sm: clamp(calc(0.875rem * var(--sp-scale)), 1.2vw, calc(0.95rem * var(--sp-scale)));
  --text-base: clamp(calc(1rem * var(--sp-scale)), 1.4vw, calc(1.05rem * var(--sp-scale)));
  --text-lg: clamp(calc(1.125rem * var(--sp-scale)), 1.8vw, calc(1.25rem * var(--sp-scale)));
  --text-xl: clamp(calc(1.25rem * var(--sp-scale)), 2vw, calc(1.5rem * var(--sp-scale)));
  --text-2xl: clamp(calc(1.5rem * var(--sp-scale)), 3vw, calc(2rem * var(--sp-scale)));
  --text-3xl: clamp(calc(1.875rem * var(--sp-scale)), 4vw, calc(2.5rem * var(--sp-scale)));
  --text-4xl: clamp(calc(2rem * var(--sp-scale)), 5vw, calc(3rem * var(--sp-scale)));
  --text-5xl: clamp(calc(2.5rem * var(--sp-scale)), 6vw, calc(3.5rem * var(--sp-scale)));

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-body: 1.6;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  /* QA: D-3, D-5 — Extended typography tokens */
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing (4px baseline) */
  --sp-1: calc(0.25rem * var(--sp-scale));
  --sp-2: calc(0.5rem * var(--sp-scale));
  --sp-3: calc(0.75rem * var(--sp-scale));
  --sp-4: calc(1rem * var(--sp-scale));
  --sp-5: calc(1.25rem * var(--sp-scale));
  --sp-6: calc(1.5rem * var(--sp-scale));
  --sp-8: calc(2rem * var(--sp-scale));
  --sp-10: calc(2.5rem * var(--sp-scale));
  --sp-12: calc(3rem * var(--sp-scale));
  --sp-16: calc(4rem * var(--sp-scale));
  --sp-20: calc(5rem * var(--sp-scale));
  --sp-24: calc(6rem * var(--sp-scale));
  --sp-32: calc(8rem * var(--sp-scale));
  --sp-40: calc(10rem * var(--sp-scale));
  --sp-48: calc(12rem * var(--sp-scale));
  --sp-64: calc(16rem * var(--sp-scale));

  /* QA: VIS-1 — Upgraded multi-layer shadow system */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.03);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --duration-slower: 0.6s;

  /* Container */
  --container-max: 1200px;
  --container-padding: clamp(var(--sp-4), 4vw, var(--sp-8));

  /* QA: L-1 — Density-driven layout tokens */
  --density-section-py: clamp(56px, 8vh, 112px);
  --density-card-p: var(--sp-8);
  --density-grid-gap: var(--sp-8);

  /* Layout Grid System */
  --layout-columns-desktop: 12;
  --layout-columns-tablet: 8;
  --layout-columns-mobile: 4;
  --layout-gap: var(--density-grid-gap, var(--sp-8));
  --layout-max-width: 1200px;
  --layout-padding-inline: var(--sp-6);

  /* Breakpoints (documentation — CSS custom properties cannot be used in media queries)
     Desktop: min-width: 901px
     Tablet:  max-width: 900px  and  min-width: 641px
     Mobile:  max-width: 640px
  */
  --bp-desktop: 901px;
  --bp-tablet: 900px;
  --bp-mobile: 640px;

  /* Button Style — soft */
  --btn-primary-bg: rgba(19 78 74 / 0.1);
  --btn-primary-color: #134e4a;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: rgba(19 78 74 / 0.18);
  --btn-primary-hover-border: transparent;
  --btn-primary-hover-color: #0f3e3b;

  /* Utility */
  --header-h: 44px;
}

/* Dark Mode helpers: keep tokens stable, but adjust surfaces */
.dark {
  --c-surface: rgba(17, 17, 24, 0.45);
  --c-surface-strong: rgba(17, 17, 24, 0.70);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
}