/* =====================================================================
   Settld Design Tokens — CSS Custom Properties
   Generated from tokens.json. Single source of truth for all surfaces.
   ===================================================================== */

:root {
  /* ---- Surface ---- */
  --s-canvas: #F6F1E6;
  --s-warm:   #F1E9D5;
  --s-deep:   #E8DEC5;
  --s-paper:  #FBF8F0;

  /* ---- Ink ---- */
  --ink:      #171513;
  --ink-body: #4A443D;
  --ink-mute: #8A8276;
  --ink-line: #DDD2B8;

  /* ---- Accent ---- */
  --teal:      #0E7C66;
  --teal-deep: #0A5F4F;
  --teal-pale: #D6EAE2;
  --coral:      #E76F51;
  --coral-pale: #FADED4;
  --butter:     #F4C94E;

  /* ---- Dark mode ---- */
  --dark-canvas:    #1E1A16;
  --dark-elevated:  #2A2521;
  --dark-border:    #3D3630;
  --dark-text:      #FBF8F0;
  --dark-text-2:    rgba(251,248,240,0.70);
  --dark-text-mute: rgba(251,248,240,0.45);

  /* ---- Semantic ---- */
  --success:    #0E7C66;
  --success-bg: #D6EAE2;
  --warning:    #D4940A;
  --warning-bg: #FAF0D4;
  --error:      #E76F51;
  --error-bg:   #FADED4;
  --info:       #2A9D8F;
  --info-bg:    #DFF0EC;

  /* ---- Wordmark ---- */
  --wm-teal: #2A9D8F;

  /* ---- Glass ---- */
  --glass-bg:     rgba(251,248,240,0.72);
  --glass-border: rgba(255,255,255,0.55);

  /* ---- Avatar palette ---- */
  --av-you:    #171513;
  --av-coral:  #E76F51;
  --av-teal:   #0E7C66;
  --av-butter: #D4940A;
  --av-mute:   #8A8276;

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', 'Onest', system-ui, -apple-system, sans-serif;
  --font-body:    'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ---- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   24px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm:    0 1px 0 rgba(23,21,19,.04), 0 1px 2px rgba(23,21,19,.06);
  --shadow-md:    0 1px 0 rgba(23,21,19,.04), 0 8px 24px -8px rgba(23,21,19,.12);
  --shadow-lg:    0 1px 0 rgba(23,21,19,.04), 0 24px 60px -24px rgba(23,21,19,.18);
  --shadow-float: 0 1px 0 rgba(23,21,19,.04), 0 30px 80px -30px rgba(23,21,19,.28);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 140ms;
  --d-med:  240ms;
  --d-slow: 420ms;

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

  /* ---- Grid ---- */
  --grid-columns: 12;
  --grid-gutter:  16px;
  --grid-margin:  32px;
  --grid-max:     1240px;

  /* ---- Z-index ---- */
  --z-base:    0;
  --z-card:    1;
  --z-sticky:  10;
  --z-nav:     50;
  --z-modal:   100;
  --z-toast:   200;
  --z-tooltip: 300;
  --z-grain:   1000;
}

/* ---- Dark mode overrides ---- */
[data-theme="dark"] {
  --s-canvas: #1E1A16;
  --s-warm:   #2A2521;
  --s-deep:   #3D3630;
  --s-paper:  #2A2521;

  --ink:      #FBF8F0;
  --ink-body: rgba(251,248,240,0.70);
  --ink-mute: rgba(251,248,240,0.45);
  --ink-line: #3D3630;

  --glass-bg:     rgba(30,26,22,0.80);
  --glass-border: rgba(61,54,48,0.55);

  --shadow-sm:    0 1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md:    0 1px 0 rgba(0,0,0,.12), 0 8px 24px -8px rgba(0,0,0,.30);
  --shadow-lg:    0 1px 0 rgba(0,0,0,.12), 0 24px 60px -24px rgba(0,0,0,.40);
  --shadow-float: 0 1px 0 rgba(0,0,0,.12), 0 30px 80px -30px rgba(0,0,0,.50);
}