/* picodingagentguide.com — the site's own tokens (The Working Note).
   Same token names as the Kortix kit, retuned for this site: a white page, near-black ink, warm
   hairlines, one periwinkle-indigo accent and 2px corners. This is the ONLY file with colour
   literals; everything else reads var(--token). Light is the default, dark follows
   prefers-color-scheme or [data-theme="dark"]. */

:root {
  color-scheme: light;

  /* ground and ink */
  --background: #ffffff;
  --pane: #ffffff;
  --surface: #f7f7f5;
  --foreground: #14161b;
  --foreground-strong: #14161b;
  --foreground-weak: #5c6169;

  --card: #f6f6f3;
  --card-foreground: #14161b;
  --popover: #ffffff;
  --popover-foreground: #14161b;

  --primary: #14161b;
  --primary-foreground: #ffffff;
  --secondary: #f1f1ee;
  --secondary-foreground: #14161b;
  --muted: #f1f1ee;
  --muted-foreground: #5c6169;
  --accent: #f6f6f3;
  --accent-foreground: #14161b;
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;

  --border: #e3e3e0;
  --input: #e3e3e0;
  --ring: #5248df;
  --hover: rgb(20 22 27 / 0.04);
  --active: rgb(20 22 27 / 0.07);

  --sidebar: #f6f6f3;
  --sidebar-foreground: #14161b;
  --sidebar-primary: #5248df;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f1f1ee;
  --sidebar-accent-foreground: #14161b;
  --sidebar-row: #f6f6f3;
  --sidebar-row-control: #f1f1ee;
  --sidebar-border: #e3e3e0;
  --sidebar-ring: #5248df;

  /* the one accent (the page head overrides --kortix-base and --ring on :root) */
  --kortix-base: #5248df;
  --kortix-base-ink: #4338ca;
  --kortix-green: #199338;
  --kortix-red: #f14b4c;
  --kortix-orange: #d18b19;
  --kortix-yellow: #cca300;
  --kortix-blue: #2b91f7;
  --kortix-purple: #ab80d6;

  --chart-1: #ffd230;
  --chart-2: #fe9a00;
  --chart-3: #e17100;
  --chart-4: #bb4d00;
  --chart-5: #973c00;

  --terminal-surface: #0f1115;
  --terminal-fg: #e7e9ee;
  --terminal-border: rgb(255 255 255 / 0.1);

  /* typesetting */
  --font-sans: 'Albert Sans', ui-sans-serif, -apple-system, 'Segoe UI', 'Helvetica Neue', 'Noto Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-display: 'Piazzolla', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-sans-system: ui-sans-serif, -apple-system, 'Segoe UI', 'Helvetica Neue', 'Noto Sans', sans-serif;
  --font-mono-system: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --tracking-tight: -0.02em;
  --tracking-note: -0.01em;
  --leading-tight: 1.12;
  --leading-snug: 1.375;
  --leading-relaxed: 1.68;

  --radius: 2px;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --spacing: 0.23rem;

  --text-xs: 0.8125rem;
  --text-xs--line-height: calc(1.35 / 0.8125);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.45 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.6 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.6 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.45 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(1.3 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(1.2 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(1.12 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1.05;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-moderate: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* this site's own surfaces */
  --site-body: #2e333b;
  --site-plate: #f6f6f3;
  --site-plate-sunk: #fbfbf9;
  --site-rule: #e3e3e0;
  --site-wash: color-mix(in oklab, var(--kortix-base) 8%, var(--background));
  --site-wash-strong: color-mix(in oklab, var(--kortix-base) 14%, var(--background));
  --site-accent-line: var(--kortix-base);
  --site-primary-hover: #2b2f37;
  --shadow-frame: none;
  --shadow-card: none;
  --transparent: transparent;
  --mask-solid: #000;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0c0d10;
  --pane: #0e1014;
  --surface: #14161a;
  --foreground: #f1f1ee;
  --foreground-strong: #ffffff;
  --foreground-weak: #9aa0a8;

  --card: #14161a;
  --card-foreground: #f1f1ee;
  --popover: #14161a;
  --popover-foreground: #f1f1ee;

  --primary: #f1f1ee;
  --primary-foreground: #0c0d10;
  --secondary: #1a1d22;
  --secondary-foreground: #f1f1ee;
  --muted: #1a1d22;
  --muted-foreground: #9aa0a8;
  --accent: #14161a;
  --accent-foreground: #f1f1ee;
  --destructive: #ff7a70;
  --destructive-foreground: #0c0d10;

  --border: #26282d;
  --input: #26282d;
  --hover: rgb(241 241 238 / 0.05);
  --active: rgb(241 241 238 / 0.09);

  --sidebar: #14161a;
  --sidebar-foreground: #f1f1ee;
  --sidebar-primary: #8f88f0;
  --sidebar-primary-foreground: #0c0d10;
  --sidebar-accent: #1a1d22;
  --sidebar-accent-foreground: #f1f1ee;
  --sidebar-row: #14161a;
  --sidebar-row-control: #26282d;
  --sidebar-border: #22242a;
  --sidebar-ring: #8f88f0;

  --kortix-base-ink: #a7a1f5;

  --site-body: #d6d9df;
  --site-plate: #14161a;
  --site-plate-sunk: #101216;
  --site-rule: #26282d;
  --site-primary-hover: #dcdcd7;
  --site-wash: color-mix(in oklab, var(--kortix-base) 18%, var(--background));
  --site-wash-strong: color-mix(in oklab, var(--kortix-base) 26%, var(--background));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0c0d10;
    --pane: #0e1014;
    --surface: #14161a;
    --foreground: #f1f1ee;
    --foreground-strong: #ffffff;
    --foreground-weak: #9aa0a8;

    --card: #14161a;
    --card-foreground: #f1f1ee;
    --popover: #14161a;
    --popover-foreground: #f1f1ee;

    --primary: #f1f1ee;
    --primary-foreground: #0c0d10;
    --secondary: #1a1d22;
    --secondary-foreground: #f1f1ee;
    --muted: #1a1d22;
    --muted-foreground: #9aa0a8;
    --accent: #14161a;
    --accent-foreground: #f1f1ee;
    --destructive: #ff7a70;
    --destructive-foreground: #0c0d10;

    --border: #26282d;
    --input: #26282d;
    --hover: rgb(241 241 238 / 0.05);
    --active: rgb(241 241 238 / 0.09);

    --sidebar: #14161a;
    --sidebar-foreground: #f1f1ee;
    --sidebar-primary: #8f88f0;
    --sidebar-primary-foreground: #0c0d10;
    --sidebar-accent: #1a1d22;
    --sidebar-accent-foreground: #f1f1ee;
    --sidebar-row: #14161a;
    --sidebar-row-control: #26282d;
    --sidebar-border: #22242a;
    --sidebar-ring: #8f88f0;

    --kortix-base-ink: #a7a1f5;

    --site-body: #d6d9df;
    --site-plate: #14161a;
    --site-plate-sunk: #101216;
    --site-rule: #26282d;
    --site-primary-hover: #dcdcd7;
    --site-wash: color-mix(in oklab, var(--kortix-base) 18%, var(--background));
    --site-wash-strong: color-mix(in oklab, var(--kortix-base) 26%, var(--background));
  }
}