/* =============================================================================
   Linear-dark — app-shell theme inspired by linear.app

   Not a Linear clone — borrows the *vocabulary* (cool-gray ramp, single
   cyan accent, dense type scale, dark-first, minimal shadows + 1px
   borders, ~150ms ease-out motion). Templates stay theme-agnostic; this
   file overrides the same shadcn-shape tokens design-system.css already
   defines.

   Loaded via [ui] theme = "linear-dark" in dazzle.toml.
   Layer: overrides — wins over base/framework/app.

   Default mode is dark. Light variant included for users who flip
   data-theme="light", but the theme is designed for dark.
   ============================================================================= */

@layer overrides {
  /* ---------------------------------------------------------------------------
     Default (dark-first)
     --------------------------------------------------------------------------- */
  :root,
  [data-theme="dark"] {
    /* Cool slate ramp — 228° hue, low saturation. Avoids the warmth of
       zinc and the coldness of true neutral; matches Linear's surface. */
    --background: 228 8% 8%;          /* page bg */
    --foreground: 228 6% 95%;          /* primary text */

    --card: 228 8% 11%;                /* one step lighter than bg */
    --card-foreground: 228 6% 95%;

    --popover: 228 8% 13%;             /* highest surface — menus */
    --popover-foreground: 228 6% 95%;

    /* Single cyan-blue accent. ~205° hue, high saturation. Used for
       buttons, focus rings, link colour, active state highlights. */
    --primary: 205 90% 55%;
    --primary-foreground: 228 8% 8%;   /* text on accent — near-black */

    --secondary: 228 6% 18%;           /* hover + secondary buttons */
    --secondary-foreground: 228 6% 95%;

    --muted: 228 6% 16%;               /* table-stripe, disabled */
    --muted-foreground: 228 5% 60%;    /* metadata text */

    --accent: 228 6% 18%;              /* row hover, dropdown hover */
    --accent-foreground: 228 6% 95%;

    --destructive: 0 70% 51.5%;        /* error red, desaturated; AA vs near-white text */
    --destructive-foreground: 0 0% 98%;

    --border: 228 6% 19%;              /* 1px hairlines */
    --input: 228 6% 19%;
    --ring: 205 90% 55%;               /* same as primary */

    --success: 145 55% 50%;
    --success-foreground: 145 30% 10%;

    --warning: 38 90% 60%;
    --warning-foreground: 38 30% 10%;

    --info: 205 90% 55%;               /* matches primary */
    --info-foreground: 228 8% 8%;

    /* Tighter type ramp. Inter Display is Linear's choice; Inter (already
       loaded) is the practical fallback. Mono uses Geist Mono / SF Mono
       for code blocks. Letter-spacing is -0.011em per Linear's measured
       sans rendering. */
    --font-sans: 'Inter', 'Inter Display', ui-sans-serif, system-ui,
      -apple-system, sans-serif;
    --font-mono: 'Berkeley Mono', 'Geist Mono', ui-monospace, SFMono-Regular,
      'JetBrains Mono', 'Cascadia Code', monospace;

    /* Linear runs notably tighter spacing than the default zinc ramp.
       Recompose around a 4px base (already the default), but cap most
       gaps at space-3 / 12px. */
    --space-3: 0.75rem;
    --space-4: 0.875rem;               /* 14px (was 16) — tighter cards */
    --space-6: 1.25rem;                /* 20px (was 24) */

    /* Sharper radii. Linear uses 4–6px on most surfaces; cards are 8px. */
    --radius-sm: 0.1875rem;             /* 3px */
    --radius: 0.25rem;                  /* 4px */
    --radius-md: 0.375rem;              /* 6px */
    --radius-lg: 0.5rem;                /* 8px — cards */
    --radius-xl: 0.625rem;              /* 10px */
    --radius-2xl: 0.75rem;              /* 12px */

    /* Lower-weight shadows. Linear leans on borders + slight ambient
       fill rather than drop shadows. */
    --shadow-xs: 0 0 0 1px hsl(228 6% 19%);
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --shadow-md: 0 2px 8px 0 hsl(0 0% 0% / 0.5);
    --shadow-lg: 0 4px 16px 0 hsl(0 0% 0% / 0.6);
    --shadow-xl: 0 8px 32px 0 hsl(0 0% 0% / 0.7);

    /* Faster transitions — Linear's micro-interactions feel ~80–120ms. */
    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-slow: 200ms;
    --ease-default: cubic-bezier(0.2, 0, 0, 1);  /* sharper ease than cubic-default */

    /* --- Marketing / sitespec reflavor (dual-use) --------------------------
       Crisp dark-tech marketing (Linear/Vercel register): a deep near-black
       hero with a cool electric-blue lift, inky alt-sections, restrained but
       confident. Dark-first — this block is the [data-theme="dark"] default. */
    --dz-hero-bg-from: oklch(0.30 0.06 250);   /* deep slate-blue */
    --dz-hero-bg-to: oklch(0.20 0.04 255);     /* near-black */
    --dz-shadow-hero: 0 30px 80px -16px oklch(0 0 0 / 0.6);
    --dz-section-alt-bg: oklch(0.12 0.012 250);
    --dz-feature-icon-bg: oklch(0.22 0.03 250);
    --dz-pricing-highlight-bg: oklch(0.42 0.14 235);
    --dz-surface-card: oklch(0.14 0.01 250);
    --dz-radius-card: 0.625rem;
    --dz-radius-button: 0.375rem;
  }

  /* ---------------------------------------------------------------------------
     Light variant — the theme's secondary mode. Cooler than the default
     light; preserves the 205° accent so brand identity stays consistent
     across modes.
     --------------------------------------------------------------------------- */
  [data-theme="light"] {
    --background: 228 30% 99%;          /* almost white, slight cool tint */
    --foreground: 228 12% 12%;

    --card: 228 30% 100%;
    --card-foreground: 228 12% 12%;

    --popover: 228 30% 100%;
    --popover-foreground: 228 12% 12%;

    --primary: 205 90% 40%;             /* darker still — true 4.5:1 AA w/ near-white text */
    --primary-foreground: 0 0% 98%;

    --secondary: 228 12% 95%;
    --secondary-foreground: 228 12% 12%;

    --muted: 228 12% 96%;
    --muted-foreground: 228 8% 42%;

    --accent: 228 12% 94%;
    --accent-foreground: 228 12% 12%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 228 10% 89%;
    --input: 228 10% 89%;
    --ring: 205 90% 48%;

    --success: 145 55% 38%;
    --success-foreground: 0 0% 98%;

    --warning: 38 90% 50%;
    --warning-foreground: 38 30% 10%;

    --info: 205 90% 48%;
    --info-foreground: 0 0% 98%;

    /* Marketing reflavor for the light variant — keeps the electric-blue
       identity but on a bright base (hero stays a deep tech gradient so the
       first fold still reads dark-tech even in light mode). */
    --dz-hero-bg-from: oklch(0.34 0.08 245);
    --dz-hero-bg-to: oklch(0.22 0.05 255);
    --dz-shadow-hero: 0 20px 60px -12px oklch(0.22 0.05 255 / 0.3);
    --dz-section-alt-bg: oklch(0.97 0.008 245);
    --dz-feature-icon-bg: oklch(0.93 0.02 235);
    --dz-pricing-highlight-bg: oklch(0.42 0.14 235);
    --dz-surface-card: white;
  }
}