/* UI Lab — Second Horizon pastel token system.
   Source of truth: ~/Dev/Design Systems /second-horizon-pastel.html (canonical values).
   Shape: shadcn-convention custom properties, light in :root, dark in .dark.
   This file maps 1:1 onto a future Next.js globals.css — keep it framework-free. */

:root {
  /* Tells the browser which way to paint the canvas, scrollbars and native
     controls before any of our CSS lands — without it the very first frame of
     a dark session is a white page. */
  color-scheme: light;

  --background: #fdfdfc;
  --foreground: #1a1a1f;
  --card: #ffffff;
  --muted: #f4f4f3;
  --muted-foreground: #6c6c75; /* darkened from #71717a so the muted pair passes WCAG AA (4.72:1) */
  --primary: #1f1f26;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f3;
  --secondary-foreground: #1f1f26;
  --destructive: #dc2626;
  --border: #e7e7e4;
  --input: #e7e7e4;
  --ring: #a5b4fc;
  --radius: 8px;

  --pastel-rose: #fce7f0;     --pastel-rose-fg: #9d2458;
  --pastel-peach: #ffedd9;    --pastel-peach-fg: #9a4a12;
  --pastel-butter: #fdf3d1;   --pastel-butter-fg: #854d0e;
  --pastel-mint: #ddf5e6;     --pastel-mint-fg: #166534;
  --pastel-sky: #ddeffd;      --pastel-sky-fg: #1d5d99;
  --pastel-lavender: #eae4fb; --pastel-lavender-fg: #5b3ba8;

  --status-success: #ddf5e6;  --status-success-fg: #166534;
  --status-warning: #fdf3d1;  --status-warning-fg: #854d0e;
  --status-error: #fde3e3;    --status-error-fg: #b91c1c;
  --status-info: #ddeffd;     --status-info-fg: #1d5d99;
  --status-neutral: #f4f4f3;  --status-neutral-fg: #52525b;

  --gradient-horizon: linear-gradient(118deg, #ffd9e8 0%, #ffe8d6 22%, #fdf3d1 42%, #dcf3e6 62%, #dbeafe 82%, #e9e2fb 100%);

  /* Extended token groups — defaults the builder modules resolve/override. */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 17px;
  --text-xl: 22px; --text-2xl: 27px; --text-3xl: 34px; --text-4xl: 42px;

  --shadow-1: 0 1px 2px rgba(26, 26, 31, 0.05);
  --shadow-2: 0 2px 6px -1px rgba(26, 26, 31, 0.07), 0 1px 2px rgba(26, 26, 31, 0.05);
  --shadow-3: 0 6px 16px -4px rgba(26, 26, 31, 0.1), 0 2px 5px -1px rgba(26, 26, 31, 0.06);
  --shadow-4: 0 12px 28px -6px rgba(26, 26, 31, 0.14), 0 4px 10px -2px rgba(26, 26, 31, 0.07);
  --shadow-5: 0 24px 48px -12px rgba(26, 26, 31, 0.2), 0 8px 18px -4px rgba(26, 26, 31, 0.08);

  --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);

  --icon-stroke: 2; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
}

.dark {
  color-scheme: dark;

  --background: #121215;
  --foreground: #ededf0;
  --card: #1a1a1f;
  --muted: #26262c;
  --muted-foreground: #9d9da8;
  --primary: #ededf0;
  --primary-foreground: #1a1a1f;
  --secondary: #26262c;
  --secondary-foreground: #ededf0;
  --destructive: #ef4444;
  --border: #2c2c33;
  --input: #2c2c33;
  --ring: #6d7bd4;

  --pastel-rose: #3d2230;     --pastel-rose-fg: #f5a8c9;
  --pastel-peach: #3d2d1e;    --pastel-peach-fg: #f7c59f;
  --pastel-butter: #38311a;   --pastel-butter-fg: #f2dd88;
  --pastel-mint: #1c3226;     --pastel-mint-fg: #93d9b1;
  --pastel-sky: #1c2d3f;      --pastel-sky-fg: #92c5f0;
  --pastel-lavender: #2b2440; --pastel-lavender-fg: #bba7ee;

  --status-success: #1c3226;  --status-success-fg: #93d9b1;
  --status-warning: #38311a;  --status-warning-fg: #f2dd88;
  --status-error: #3d1f1f;    --status-error-fg: #f49b9b;
  --status-info: #1c2d3f;     --status-info-fg: #92c5f0;
  --status-neutral: #26262c;  --status-neutral-fg: #9d9da8;

  --gradient-horizon: linear-gradient(118deg, #523443 0%, #52402e 22%, #4d4220 42%, #2c4a38 62%, #2e415c 82%, #3c3356 100%);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px -1px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 2px 5px -1px rgba(0, 0, 0, 0.32);
  --shadow-4: 0 12px 28px -6px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.34);
  --shadow-5: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 8px 18px -4px rgba(0, 0, 0, 0.36);
}