/* ============================================================================
   Ary-Mas Design System — Colors & Type
   Inspired by the world's northernmost forest on the Taymyr Peninsula.
   Larch greens, weathered bark, lichen rust, tundra gold, polar sky.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Greens — sparse larch needles. */
  --larch-50:  #eef1ec;
  --larch-100: #d9e0d2;
  --larch-200: #b6c1a8;
  --larch-300: #8a987a;
  --larch-400: #5e6e51;
  --larch-500: #3f4d35;
  --larch-600: #2f3a26;
  --larch-700: #232c1b;
  --larch-800: #181e13;
  --larch-900: #0e1209;

  /* Rust / lichen */
  --rust-50:  #f6ece2;
  --rust-100: #ebd5bd;
  --rust-200: #d8b08a;
  --rust-300: #c08a5b;
  --rust-400: #9c6738;
  --rust-500: #7a4c25;
  --rust-600: #5a371a;
  --rust-700: #3d2511;

  /* Tundra */
  --tundra-100: #efe6c8;
  --tundra-300: #d4be84;
  --tundra-500: #a08a4d;

  /* Sky */
  --sky-100: #dde4e7;
  --sky-300: #a8b8c0;
  --sky-500: #6c8290;
  --sky-700: #3e525e;

  /* Bone / paper */
  --bone-50:  #f6f3ec;
  --bone-100: #ece7d9;
  --bone-200: #d9d3c1;
  --bone-300: #b9b3a0;

  /* Ink */
  --ink-900: #1a1a17;
  --ink-700: #2e2e29;
  --ink-500: #555049;
  --ink-300: #8a857a;

  /* Signal */
  --signal-warn:  #b8761c;
  --signal-error: #8e2f24;
  --signal-ok:    #4a6b3d;

  /* Semantic — light */
  --bg-page:        var(--bone-50);
  --bg-surface:     #fbfaf4;
  --bg-surface-2:   var(--bone-100);
  --bg-elevated:    #ffffff;

  --fg-1:           var(--ink-900);
  --fg-2:           var(--ink-500);
  --fg-3:           var(--ink-300);
  --fg-on-accent:   var(--bone-50);

  --border-1:       var(--bone-200);
  --border-2:       var(--bone-300);

  --accent:         var(--larch-500);
  --accent-hover:   var(--larch-600);
  --accent-press:   var(--larch-700);
  --accent-soft:    var(--larch-100);

  --secondary:      var(--rust-400);

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Type tokens */
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Inter Tight', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display-xl: 600 64px/1.05 var(--font-display);
  --t-display-lg: 500 48px/1.08 var(--font-display);
  --t-display-md: 500 36px/1.12 var(--font-display);

  --t-h1: 600 28px/1.2 var(--font-sans);
  --t-h2: 600 22px/1.25 var(--font-sans);
  --t-h3: 600 18px/1.3 var(--font-sans);
  --t-h4: 600 15px/1.35 var(--font-sans);

  --t-body-lg: 400 17px/1.5 var(--font-sans);
  --t-body:    400 15px/1.5 var(--font-sans);
  --t-body-sm: 400 13px/1.45 var(--font-sans);

  --t-label: 500 12px/1.3 var(--font-sans);
  --t-caption: 400 12px/1.35 var(--font-sans);
  --t-caps: 600 11px/1.2 var(--font-sans);
  --t-mono: 400 13px/1.5 var(--font-mono);

  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;
}

:root[data-theme="dark"],
.theme-dark {
  --bg-page:        #0d100c;
  --bg-surface:     #14180f;
  --bg-surface-2:   #1c2117;
  --bg-elevated:    #232a1e;

  --fg-1:           #e8e4d4;
  --fg-2:           #a8a397;
  --fg-3:           #6b685e;
  --fg-on-accent:   #0d100c;

  --border-1:       #232a1e;
  --border-2:       #2f3727;

  --accent:         #8ea27d;
  --accent-hover:   #a3b693;
  --accent-press:   #758a64;

  --secondary:      #c08a5b;
}