/* ============================================================
 * gustyle design tokens — "Paper & Ink"
 * Vendored from the Claude Design project (gustyle-design-system).
 * Order: fonts @import, then colors, typography, spacing, base.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Ubuntu:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------- COLORS ---------------- */
:root {
  /* ---- PAPER ramp (warm light neutrals) ---- */
  --paper-0:  #faf7ef;
  --paper-1:  #f4efe2;
  --paper-2:  #ece5d4;
  --paper-3:  #ddd4be;
  --paper-4:  #c9bda1;

  /* ---- INK ramp (warm dark neutrals) ---- */
  --ink-0:    #15120c;
  --ink-1:    #1d1913;
  --ink-2:    #27211a;
  --ink-3:    #342d23;
  --ink-4:    #473d30;

  /* ---- SUMI ramp (ink for text) ---- */
  --sumi-900: #1c1813;
  --sumi-700: #463f33;
  --sumi-500: #756b59;
  --sumi-300: #a79c86;
  --sumi-100: #d6cdb8;

  /* ---- CHALK ramp (text on ink) ---- */
  --chalk-900: #f3eee2;
  --chalk-700: #cfc6b4;
  --chalk-500: #9b9180;
  --chalk-300: #6a6253;

  /* ---- CLAY — primary accent ---- */
  --clay-700: #9a3412;
  --clay-600: #b4451f;
  --clay-500: #c2410c;
  --clay-400: #db5b22;
  --clay-300: #ec8453;
  --clay-100: #f6e1d2;
  --clay-tint-ink: #3a2317;

  /* ---- PLUM — secondary accent ---- */
  --plum-600: #6e2a55;
  --plum-500: #893a6b;
  --plum-300: #c187a9;

  /* ---- NATURE semantics ---- */
  --sage-600:   #4d7a44;
  --sage-500:   #5f9054;
  --sage-100:   #e2ecd8;
  --ochre-600:  #a9750f;
  --ochre-500:  #c68a14;
  --ochre-100:  #f5e7c6;
  --vermilion-600: #a83524;
  --vermilion-500: #c0442f;
  --vermilion-100: #f4ddd5;
  --indigo-600: #2f4f7a;
  --indigo-500: #3a608f;
  --indigo-100: #d8e1ee;

  /* ---- SEMANTIC ALIASES — LIGHT (paper) ---- */
  --bg:            var(--paper-0);
  --bg-sunken:     var(--paper-1);
  --surface:       #fffdf7;
  --surface-raised:#ffffff;
  --surface-sunken:var(--paper-1);
  --surface-hover: var(--paper-1);
  --surface-active:var(--paper-2);

  --text:          var(--sumi-900);
  --text-secondary:var(--sumi-700);
  --text-muted:    var(--sumi-500);
  --text-faint:    var(--sumi-300);
  --text-disabled: var(--sumi-100);
  --text-on-accent:#fff8f2;

  --border:        #e6ddc9;
  --border-strong: var(--paper-3);
  --border-faint:  #efe8d8;

  --accent:        var(--clay-500);
  --accent-hover:  var(--clay-600);
  --accent-active: var(--clay-700);
  --accent-tint:   var(--clay-100);
  --accent-text:   var(--clay-700);

  --link:          var(--clay-600);
  --link-hover:    var(--clay-700);

  --success: var(--sage-600);   --success-tint: var(--sage-100);
  --warning: var(--ochre-600);  --warning-tint: var(--ochre-100);
  --danger:  var(--vermilion-600); --danger-tint: var(--vermilion-100);
  --info:    var(--indigo-600);  --info-tint:    var(--indigo-100);

  --focus-ring:    color-mix(in oklch, var(--clay-500) 55%, transparent);
  --selection:     color-mix(in oklch, var(--clay-300) 45%, transparent);
  --overlay:       rgba(28, 24, 19, 0.42);

  color-scheme: light;
}

/* ---- SEMANTIC ALIASES — DARK (ink) ---- */
:root[data-theme="dark"],
:root.dark,
.gus-dark {
  --bg:            var(--ink-0);
  --bg-sunken:     #100d08;
  --surface:       var(--ink-1);
  --surface-raised:var(--ink-2);
  --surface-sunken:#110e09;
  --surface-hover: var(--ink-2);
  --surface-active:var(--ink-3);

  --text:          var(--chalk-900);
  --text-secondary:var(--chalk-700);
  --text-muted:    var(--chalk-500);
  --text-faint:    var(--chalk-300);
  --text-disabled: #4a4234;
  --text-on-accent:#fff8f2;

  --border:        #322a20;
  --border-strong: var(--ink-4);
  --border-faint:  #251f18;

  --accent:        var(--clay-400);
  --accent-hover:  var(--clay-300);
  --accent-active: var(--clay-500);
  --accent-tint:   var(--clay-tint-ink);
  --accent-text:   var(--clay-300);

  --link:          var(--clay-300);
  --link-hover:    #f0a279;

  --success: var(--sage-500);   --success-tint: #1f2c18;
  --warning: var(--ochre-500);  --warning-tint: #332710;
  --danger:  var(--vermilion-500); --danger-tint: #321a14;
  --info:    var(--indigo-500);  --info-tint:    #182536;

  --focus-ring:    color-mix(in oklch, var(--clay-400) 60%, transparent);
  --selection:     color-mix(in oklch, var(--clay-500) 40%, transparent);
  --overlay:       rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---------------- TYPOGRAPHY ---------------- */
:root {
  --font-serif:    'Spectral', Georgia, 'Times New Roman', serif;
  --font-serif-text: 'Source Serif 4', 'Spectral', Georgia, serif;
  --font-sans:  'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --font-display: var(--font-serif);
  --font-reading: var(--font-serif-text);
  --font-ui:      var(--font-sans);
  --font-label:   var(--font-sans);
  --font-code:    var(--font-mono);

  --text-2xs: 0.6875rem;
  --text-xs:  0.78125rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.1875rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;
}

/* ---------------- SPACING / RADII / SHADOWS / MOTION ---------------- */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  --radius-xs:  3px;
  --radius-sm:  4px;
  --radius:     5px;
  --radius-md:  7px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-full:999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  --shadow-xs: 0 1px 1px rgba(46, 36, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(46, 36, 22, 0.07), 0 1px 1px rgba(46, 36, 22, 0.04);
  --shadow:    0 2px 6px rgba(46, 36, 22, 0.08), 0 1px 2px rgba(46, 36, 22, 0.05);
  --shadow-md: 0 6px 16px rgba(46, 36, 22, 0.10), 0 2px 4px rgba(46, 36, 22, 0.06);
  --shadow-lg: 0 14px 34px rgba(46, 36, 22, 0.14), 0 4px 8px rgba(46, 36, 22, 0.07);
  --shadow-inset: inset 0 1px 2px rgba(46, 36, 22, 0.06);

  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration:        180ms;
  --duration-slow:   280ms;

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");

  --container-sm: 40rem;
  --container:    64rem;
  --container-lg: 80rem;
  --reading-measure: 38rem;
}

:root[data-theme="dark"],
:root.dark,
.gus-dark {
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.42);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------------- BASE ELEMENT DEFAULTS ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, pre, samp { font-family: var(--font-code); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}