/* ==========================================================================
   PEEKWELL DESIGN SYSTEM · TOKENS
   "The casebook" · v1.1
   Every screen is a page in Peeky's casebook: light paper, ink type,
   characters that sit on the page, brass where the lens rests.
   ========================================================================== */

:root {
  /* ---- Paper (light, low-chroma cream; no filters, no grain) ------------ */
  --paper-0:   #FFFDF9;   /* inputs, modals, raised sheets */
  --paper-50:  #FAF7F0;   /* the page */
  --paper-100: #F3EEE3;   /* cards, panels */
  --paper-150: #ECE6D8;   /* sidebar, table header */
  --paper-200: #E3DBC9;   /* evidence blocks, recessed wells */
  --paper-300: #D3C8B0;   /* dividers, tracks */
  --paper-400: #B7AA90;   /* strong border, disabled fill */

  /* ---- Ink ------------------------------------------------------------- */
  --ink-900: #1F2430;
  --ink-800: #333945;     /* primary text, wordmark */
  --ink-700: #434A57;
  --ink-600: #545A67;     /* secondary text */
  --ink-500: #6B717D;
  --ink-400: #7E838E;     /* muted text, placeholders */
  --ink-300: #A5A9B2;     /* disabled text */
  --ink-200: #C9CCD2;

  /* ---- Peeky · powder blue (brand, info) ------------------------------- */
  --peeky-100: #E6EFF7;
  --peeky-200: #CBDDEE;
  --peeky-300: #ABC8DF;
  --peeky-400: #8EAFCD;
  --peeky-500: #6C93B8;
  --peeky-600: #4F77A0;
  --peeky-700: #3B5D82;
  --peeky-800: #2B4562;

  /* ---- Cheeky · mint (action, passed) + butter (notes, medium) ----------- */
  --mint-100: #E8F1E4;
  --mint-200: #CFE3CA;
  --mint-300: #AECFAE;
  --mint-400: #8FBC8E;    /* primary action */
  --mint-500: #74A673;    /* primary action hover */
  --mint-600: #5B8A5C;    /* passed text (AA on paper) */
  --mint-700: #456B47;
  --mint-800: #2F4D32;

  --butter-100: #FBF4D2;
  --butter-200: #F5EBB8;
  --butter-300: #EEE2A8;
  --butter-400: #E6D07A;
  --butter-500: #D5B84B;
  --butter-600: #B3922C;
  --butter-700: #85691A;

  /* ---- Officer · lavender (regulatory watch) ---------------------------- */
  --lavender-100: #EDE8F6;
  --lavender-200: #DCD2EC;
  --lavender-300: #C9B7E5;
  --lavender-400: #AEA2D7;
  --lavender-500: #9686C3;
  --lavender-600: #7F6FB0;
  --lavender-700: #62528F;
  --lavender-800: #4A3D6E;

  /* ---- Brass · the magnifying glass (accent) ---------------------------- */
  --brass-100: #FAF1D8;
  --brass-200: #F0DDA6;
  --brass-300: #E5C878;
  --brass-400: #D4AC52;
  --brass-500: #C29538;
  --brass-600: #A07828;
  --brass-700: #7C5B1C;

  /* ---- Props ----------------------------------------------------------- */
  --walnut-300: #A98B70; --walnut-500: #7B5B42; --walnut-700: #5B412E;
  --stone-200: #DEDAD3; --stone-300: #BFB9B0; --stone-500: #8F8A82; --stone-700: #625E57;
  --moss-400: #8DA07A; --moss-600: #667A57;

  /* ---- Brick · the ticket (critical, errors, destructive) --------------- */
  --brick-100: #F8E3DC;
  --brick-200: #EFC5B8;
  --brick-300: #DE9E8B;
  --brick-500: #B8573F;
  --brick-600: #9C4631;
  --brick-700: #7E3626;

  /* ---- Semantic aliases ------------------------------------------------- */
  --bg:               var(--paper-50);
  --bg-card:          var(--paper-100);
  --bg-sidebar:       var(--paper-150);
  --bg-recessed:      var(--paper-200);
  --bg-sheet:         var(--paper-0);
  --bg-inverse:       var(--ink-800);
  --bg-overlay:       rgba(31, 36, 48, 0.5);

  --text:             var(--ink-800);
  --text-2:           var(--ink-600);
  --text-3:           var(--ink-400);
  --text-disabled:    var(--ink-300);
  --text-inverse:     var(--paper-50);
  --text-link:        var(--peeky-600);

  --line:             rgba(51, 57, 69, 0.12);
  --line-strong:      rgba(51, 57, 69, 0.26);
  --line-soft:        rgba(51, 57, 69, 0.07);

  --brand:            var(--peeky-300);
  --brand-strong:     var(--peeky-600);
  --action:           var(--mint-400);
  --action-hover:     var(--mint-500);
  --action-text:      var(--ink-900);
  --accent:           var(--brass-500);
  --accent-soft:      var(--brass-200);
  --perf-core:        #1F2430;   /* the hole in the perforation: always dark */

  /* Findings severity */
  --sev-critical: var(--brick-500);   --sev-critical-bg: var(--brick-100);   --sev-critical-text: var(--brick-700);
  --sev-high:     var(--brass-500);   --sev-high-bg:     var(--brass-100);   --sev-high-text:     var(--brass-700);
  --sev-medium:   var(--butter-500);  --sev-medium-bg:   var(--butter-100);  --sev-medium-text:   var(--butter-700);
  --sev-low:      var(--stone-500);   --sev-low-bg:      var(--stone-200);   --sev-low-text:      var(--stone-700);
  --sev-info:     var(--peeky-500);   --sev-info-bg:     var(--peeky-100);   --sev-info-text:     var(--peeky-700);
  --sev-pass:     var(--mint-500);    --sev-pass-bg:     var(--mint-100);    --sev-pass-text:     var(--mint-700);
  --sev-watch:    var(--lavender-500);--sev-watch-bg:    var(--lavender-100);--sev-watch-text:    var(--lavender-700);

  --success: var(--mint-600);
  --warning: var(--brass-600);
  --danger:  var(--brick-600);
  --info:    var(--peeky-600);

  /* Graphs (score over time) */
  --graph-surface:   var(--bg-card);
  --graph-divider:   var(--paper-300);
  --graph-axis-text: var(--ink-400);
  --graph-good:      var(--mint-500);
  --graph-warn:      var(--brass-400);
  --graph-bad:       var(--brick-500);
  --graph-good-bar:  var(--mint-300);
  --graph-warn-bar:  var(--brass-300);
  --graph-bad-bar:   var(--brick-300);
  --graph-band-fill: rgba(116,166,115,0.10);
  --graph-band-edge: rgba(116,166,115,0.40);
  --graph-band-tint-good: rgba(116,166,115,0.12);
  --graph-band-tint-warn: rgba(212,172,82,0.16);
  --graph-band-tint-bad:  rgba(184,87,63,0.14);
  --graph-projection: var(--paper-400);
  --graph-callout:    var(--ink-800);
  --graph-callout-text: var(--paper-50);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-ui:      'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-hand:    'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  --font-mono:    'DM Mono', 'SF Mono', 'Menlo', monospace;

  --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem; --fs-6xl: 4.75rem;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.65;
  --tr-tight: -0.02em; --tr-base: 0; --tr-wide: 0.04em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---- Shape · continuous (Apple-like) rounded rectangles --------------- */
  --r-xs:   6px;      /* tags, code chips, kbd */
  --r-sm:   10px;     /* chips, menu items, small buttons */
  --r-md:   12px;     /* buttons */
  --r-lg:   14px;     /* inputs */
  --r-xl:   18px;     /* cards, findings, notes */
  --r-2xl:  24px;     /* panels, stages, modals */
  --r-3xl:  32px;     /* hero stages */
  --r-round: 999px;   /* avatars, dots, switch track only */
  --r-hand: 255px 18px 225px 18px / 18px 225px 18px 255px;  /* Peeky's note only */

  /* ---- Elevation (ink-tinted) ------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(51,57,69,0.05), 0 1px 1px rgba(51,57,69,0.03);
  --shadow-2: 0 2px 6px rgba(51,57,69,0.07), 0 10px 24px -10px rgba(51,57,69,0.14);
  --shadow-3: 0 6px 16px rgba(51,57,69,0.09), 0 28px 48px -18px rgba(51,57,69,0.20);
  --shadow-sticker: 0 0 0 3px var(--paper-0), 0 3px 10px rgba(51,57,69,0.16);
  --lens: 0 0 0 3px rgba(194,149,56,0.32);
  --lens-glow: 0 0 0 3px rgba(194,149,56,0.32), 0 0 24px rgba(212,172,82,0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-peek:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-settle: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sweep:  cubic-bezier(0.45, 0, 0.55, 1);   /* symmetric, slows at both ends */
  --ease-glide:  cubic-bezier(0.3, 0.7, 0.2, 1);   /* the nav pill */
  --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms; --t-story: 700ms;

  /* ---- Layout ----------------------------------------------------------- */
  --measure: 66ch; --content-max: 1200px; --sidebar-w: 248px; --topbar-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500;
}

/* Reading-lamp mode: paper becomes slate, ink becomes cream; cast colours and brass stay. */
:root[data-theme="dark"] {
  --paper-0:   #323846;
  --paper-50:  #232833;
  --paper-100: #2B303C;
  --paper-150: #1E222C;
  --paper-200: #1A1D26;
  --paper-300: #3E4452;
  --paper-400: #4F5665;
  --ink-900:   #F7F2E8;
  --ink-800:   #EDE6D8;
  --ink-700:   #D9D2C4;
  --ink-600:   #C6BFB2;
  --ink-500:   #A9A399;
  --ink-400:   #8F8C86;
  --ink-300:   #6C6A66;
  --ink-200:   #4E4D4A;
  --text-inverse: #232833;
  --bg-inverse: #EDE6D8;
  --perf-core: #0B0D12;
  --line:        rgba(237,230,216,0.12);
  --line-strong: rgba(237,230,216,0.26);
  --line-soft:   rgba(237,230,216,0.07);
  --text-link:   var(--peeky-300);
  --action-text: #1F2430;
  --sev-critical-bg: rgba(184,87,63,0.20);  --sev-critical-text: #EBAE9D;
  --sev-high-bg:     rgba(194,149,56,0.20); --sev-high-text: #E9CF86;
  --sev-medium-bg:   rgba(213,184,75,0.16); --sev-medium-text: #F0E5B0;
  --sev-low-bg:      rgba(143,138,130,0.20);--sev-low-text: #D3CDC3;
  --sev-info-bg:     rgba(108,147,184,0.20);--sev-info-text: #CDDFEF;
  --sev-pass-bg:     rgba(116,166,115,0.20);--sev-pass-text: #CFE3CA;
  --sev-watch-bg:    rgba(150,134,195,0.20);--sev-watch-text: #DDD3EE;
  --graph-band-fill: rgba(116,166,115,0.14);
  --graph-callout: #EDE6D8; --graph-callout-text: #232833;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.5);
  --shadow-3: 0 6px 16px rgba(0,0,0,0.35), 0 28px 48px -18px rgba(0,0,0,0.6);
  --shadow-sticker: 0 0 0 3px #3E4452, 0 3px 10px rgba(0,0,0,0.4);
}