/* ==========================================================================
   Plinth · design tokens
   ==========================================================================
   Layer 1 · Primitives   raw scales (color ramps, radius, shadows, motion, type)
   Layer 2 · Semantic     role-based aliases every component styles against
   Layer 3 · Component    per-component hooks, defined next to each component

   Theming: override Layer 1 (and rarely Layer 2) in a single CSS file.
   Components only ever reference Layer 2+ · never raw ramp steps.

   Color ramps follow the 12-step convention:
     1–2  app + subtle backgrounds        6–8  borders (subtle → strong)
     3–5  component fills (rest → active) 9–10 solid fills (rest → hover)
     11–12 text (secondary → primary)
   ========================================================================== */

@custom-variant dark (&:is(.dark *));

/* --------------------------------------------------------------------------
   Layer 1 · Primitives · light
   -------------------------------------------------------------------------- */
:root {
  /* Gray ramp · near-neutral with a faint cool cast */
  --gray-1: oklch(0.993 0.0015 260);
  --gray-2: oklch(0.981 0.002 260);
  --gray-3: oklch(0.955 0.0025 260);
  --gray-4: oklch(0.929 0.003 260);
  --gray-5: oklch(0.903 0.0035 260);
  --gray-6: oklch(0.872 0.004 260);
  --gray-7: oklch(0.828 0.0045 260);
  --gray-8: oklch(0.72 0.005 260);
  --gray-9: oklch(0.62 0.005 260);
  --gray-10: oklch(0.55 0.005 260);
  --gray-11: oklch(0.448 0.005 260);
  --gray-12: oklch(0.208 0.006 260);

  /* Accent ramp · restrained blue */
  --accent-1: oklch(0.99 0.004 255);
  --accent-2: oklch(0.976 0.01 255);
  --accent-3: oklch(0.946 0.026 255);
  --accent-4: oklch(0.912 0.05 255);
  --accent-5: oklch(0.872 0.078 255);
  --accent-6: oklch(0.822 0.102 255);
  --accent-7: oklch(0.752 0.128 255);
  --accent-8: oklch(0.662 0.158 255);
  --accent-9: oklch(0.552 0.186 255);
  --accent-10: oklch(0.502 0.186 255);
  --accent-11: oklch(0.478 0.166 255);
  --accent-12: oklch(0.302 0.098 255);

  /* Status colors · solid / subtle bg / border / long-form text */
  --red-solid: oklch(0.577 0.215 27);
  --red-subtle: oklch(0.965 0.016 22);
  --red-border: oklch(0.87 0.06 24);
  --red-text: oklch(0.505 0.19 27);
  --green-solid: oklch(0.607 0.132 155);
  --green-subtle: oklch(0.966 0.024 152);
  --green-border: oklch(0.87 0.07 152);
  --green-text: oklch(0.5 0.115 155);
  --amber-solid: oklch(0.762 0.152 78);
  --amber-subtle: oklch(0.972 0.032 88);
  --amber-border: oklch(0.888 0.096 86);
  --amber-text: oklch(0.552 0.12 70);

  /* Radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows · layered, low-opacity */
  --shadow-xs: 0 1px 2px oklch(0.2 0.01 260 / 0.05);
  --shadow-sm:
    0 1px 2px oklch(0.2 0.01 260 / 0.06),
    0 1px 3px oklch(0.2 0.01 260 / 0.06);
  --shadow-md:
    0 2px 4px oklch(0.2 0.01 260 / 0.05),
    0 4px 8px oklch(0.2 0.01 260 / 0.06);
  --shadow-lg:
    0 4px 8px oklch(0.2 0.01 260 / 0.05),
    0 12px 24px oklch(0.2 0.01 260 / 0.08);
  --shadow-xl:
    0 8px 16px oklch(0.2 0.01 260 / 0.06),
    0 24px 48px oklch(0.2 0.01 260 / 0.1);
  --shadow-border: inset 0 0 0 1px;

  /* Motion */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
  --duration-slower: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Typography */
  --font-sans:
    var(--plinth-font-sans, ui-sans-serif), system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-mono:
    var(--plinth-font-mono, ui-monospace), "SF Mono", SFMono-Regular, Menlo,
    monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
}

/* --------------------------------------------------------------------------
   Layer 1 · Primitives · dark
   -------------------------------------------------------------------------- */
.dark {
  --gray-1: oklch(0.152 0.004 260);
  --gray-2: oklch(0.178 0.004 260);
  --gray-3: oklch(0.212 0.005 260);
  --gray-4: oklch(0.24 0.005 260);
  --gray-5: oklch(0.268 0.005 260);
  --gray-6: oklch(0.302 0.006 260);
  --gray-7: oklch(0.35 0.006 260);
  --gray-8: oklch(0.42 0.007 260);
  --gray-9: oklch(0.5 0.007 260);
  --gray-10: oklch(0.56 0.007 260);
  --gray-11: oklch(0.72 0.006 260);
  --gray-12: oklch(0.948 0.004 260);

  --accent-1: oklch(0.172 0.016 255);
  --accent-2: oklch(0.198 0.026 255);
  --accent-3: oklch(0.25 0.056 255);
  --accent-4: oklch(0.292 0.086 255);
  --accent-5: oklch(0.332 0.106 255);
  --accent-6: oklch(0.382 0.118 255);
  --accent-7: oklch(0.442 0.138 255);
  --accent-8: oklch(0.522 0.166 255);
  --accent-9: oklch(0.602 0.186 255);
  --accent-10: oklch(0.652 0.176 255);
  --accent-11: oklch(0.752 0.136 255);
  --accent-12: oklch(0.918 0.048 255);

  --red-solid: oklch(0.628 0.2 27);
  --red-subtle: oklch(0.22 0.04 26);
  --red-border: oklch(0.36 0.09 26);
  --red-text: oklch(0.75 0.14 25);
  --green-solid: oklch(0.64 0.13 155);
  --green-subtle: oklch(0.22 0.035 152);
  --green-border: oklch(0.35 0.07 152);
  --green-text: oklch(0.78 0.12 155);
  --amber-solid: oklch(0.78 0.15 80);
  --amber-subtle: oklch(0.23 0.04 85);
  --amber-border: oklch(0.38 0.08 85);
  --amber-text: oklch(0.85 0.12 88);

  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.28);
  --shadow-sm:
    0 1px 2px oklch(0 0 0 / 0.32),
    0 1px 3px oklch(0 0 0 / 0.3);
  --shadow-md:
    0 2px 4px oklch(0 0 0 / 0.3),
    0 4px 8px oklch(0 0 0 / 0.32);
  --shadow-lg:
    0 4px 8px oklch(0 0 0 / 0.32),
    0 12px 24px oklch(0 0 0 / 0.38);
  --shadow-xl:
    0 8px 16px oklch(0 0 0 / 0.35),
    0 24px 48px oklch(0 0 0 / 0.45);
}

/* --------------------------------------------------------------------------
   Layer 2 · Semantic · defined once, resolves through the ramps above
   -------------------------------------------------------------------------- */
:root {
  --background: oklch(1 0 0);
  --foreground: var(--gray-12);

  --surface: oklch(1 0 0); /* cards, popovers, inputs */
  --surface-raised: oklch(1 0 0); /* menus, dialogs (pair with shadow) */
  --muted: var(--gray-3);
  --muted-foreground: var(--gray-11);
  --subtle: var(--gray-2); /* page-section / hover washes */

  --border: var(--gray-5);
  --border-strong: var(--gray-7); /* inputs, interactive outlines */

  --primary: var(--gray-12); /* main action: high-contrast neutral */
  --primary-hover: var(--gray-11);
  --primary-foreground: var(--gray-1);

  --accent: var(--accent-9); /* brand/selected/focus */
  --accent-hover: var(--accent-10);
  --accent-foreground: oklch(0.99 0.004 255);
  --accent-subtle: var(--accent-3);
  --accent-text: var(--accent-11);

  --destructive: var(--red-solid);
  --destructive-hover: oklch(from var(--red-solid) calc(l - 0.05) c h);
  --destructive-foreground: oklch(0.99 0.004 20);
  --destructive-subtle: var(--red-subtle);
  --destructive-border: var(--red-border);
  --destructive-text: var(--red-text);

  --success: var(--green-solid);
  --success-subtle: var(--green-subtle);
  --success-border: var(--green-border);
  --success-text: var(--green-text);

  --warning: var(--amber-solid);
  --warning-subtle: var(--amber-subtle);
  --warning-border: var(--amber-border);
  --warning-text: var(--amber-text);

  --ring: var(--accent-9);
  --radius: var(--radius-md);
}

.dark {
  --background: var(--gray-1);
  --surface: var(--gray-2);
  --surface-raised: var(--gray-3);
  --primary-foreground: oklch(0.152 0.004 260);
}

/* --------------------------------------------------------------------------
   Tailwind theme mapping · enables bg-background, text-muted-foreground, etc.
   -------------------------------------------------------------------------- */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-subtle: var(--subtle);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-subtle: var(--accent-subtle);
  --color-accent-text: var(--accent-text);
  --color-destructive: var(--destructive);
  --color-destructive-hover: var(--destructive-hover);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-subtle: var(--destructive-subtle);
  --color-destructive-border: var(--destructive-border);
  --color-destructive-text: var(--destructive-text);
  --color-success: var(--success);
  --color-success-subtle: var(--success-subtle);
  --color-success-border: var(--success-border);
  --color-success-text: var(--success-text);
  --color-warning: var(--warning);
  --color-warning-subtle: var(--warning-subtle);
  --color-warning-border: var(--warning-border);
  --color-warning-text: var(--warning-text);
  --color-ring: var(--ring);

  --color-gray-1: var(--gray-1);
  --color-gray-2: var(--gray-2);
  --color-gray-3: var(--gray-3);
  --color-gray-4: var(--gray-4);
  --color-gray-5: var(--gray-5);
  --color-gray-6: var(--gray-6);
  --color-gray-7: var(--gray-7);
  --color-gray-8: var(--gray-8);
  --color-gray-9: var(--gray-9);
  --color-gray-10: var(--gray-10);
  --color-gray-11: var(--gray-11);
  --color-gray-12: var(--gray-12);
  --color-accent-1: var(--accent-1);
  --color-accent-2: var(--accent-2);
  --color-accent-3: var(--accent-3);
  --color-accent-4: var(--accent-4);
  --color-accent-5: var(--accent-5);
  --color-accent-6: var(--accent-6);
  --color-accent-7: var(--accent-7);
  --color-accent-8: var(--accent-8);
  --color-accent-9: var(--accent-9);
  --color-accent-10: var(--accent-10);
  --color-accent-11: var(--accent-11);
  --color-accent-12: var(--accent-12);

  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);

  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);

  --ease-out: var(--ease-out);
  --ease-in-out: var(--ease-in-out);
  --ease-bounce: var(--ease-bounce);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  * {
    border-color: var(--border);
  }
  ::selection {
    background: var(--accent-4);
  }
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
  }
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}