/* =============================================================
   tokens.css — Design system tokens for Wedding Week Hub
   Warm, handmade-feeling identity for a cabin wedding weekend.
   All variable names preserved for JS/CSS compatibility.
   ============================================================= */

:root {
  color-scheme: light;

  /* Backgrounds */
  --bg:       #FAF7F2;  /* warm off-white page bg */
  --surface:  #F0EBE1;  /* warm tan/kraft for cards */
  --surface2: #E8E2D9;  /* slightly deeper tan — input fills, list headers */

  /* Borders */
  --border:     rgba(28,28,26,.08);
  --border-med: rgba(28,28,26,.15);

  /* Text */
  --text:  #1C1C1A;
  --text2: #6B6560;
  --text3: #A09B95;

  /* Primary accent — deep forest green */
  --accent:    #2D4A35;
  --accent-fg: #FFFFFF;

  /* Inverse — near-black background for toast pills, clock card */
  --inverse-bg: #1C1C1A;
  --inverse-fg: #FAF7F2;

  /* Brand — sage green (fullscreen confirm btn, secondary highlights) */
  --brand:       #7A9E7E;
  --brand-fg:    #FFFFFF;
  --brand-muted: #E4EDE5;

  /* Status colors */
  --green:        #15803d;
  --green-bg:     #F0FAF4;
  --green-border: #BBF7D0;

  --amber:        #B45309;
  --amber-bg:     #FDF8EC;
  --amber-border: #FDE68A;

  --red:        #C41B1B;
  --red-bg:     #FDF2F2;
  --red-border: #FECACA;

  --blue: #1D4ED8;

  /* Party identity / avatar colors — intentionally unchanged */
  --c-blue-bg:   #DBEAFE; --c-blue-fg:   #1D4ED8;
  --c-green-bg:  #DCFCE7; --c-green-fg:  #15803D;
  --c-amber-bg:  #FEF3C7; --c-amber-fg:  #B45309;
  --c-coral-bg:  #FFE4E6; --c-coral-fg:  #BE123C;
  --c-teal-bg:   #CCFBF1; --c-teal-fg:   #0F766E;
  --c-pink-bg:   #FCE7F3; --c-pink-fg:   #BE185D;
  --c-purple-bg: #F3E8FF; --c-purple-fg: #7E22CE;

  /* Border radius — radius-sm tightened to 4px per spec */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows — soft, warm-tinted */
  --shadow:    0 1px 3px rgba(28,28,26,.05),0 1px 2px rgba(28,28,26,.04);
  --shadow-md: 0 4px 16px rgba(28,28,26,.08),0 2px 4px rgba(28,28,26,.04);

  /* Spacing scale — 4px base unit */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Backgrounds — warm dark browns, not pure black */
    --bg:       #141210;
    --surface:  #1E1C19;
    --surface2: #262320;

    --border:     rgba(250,247,242,.07);
    --border-med: rgba(250,247,242,.13);

    --text:  #EDE9E3;
    --text2: #8C877F;
    --text3: #635E58;

    /* Accent — lighter sage readable on dark background */
    --accent:    #8FBA95;
    --accent-fg: #141210;

    --inverse-bg: #EDE9E3;
    --inverse-fg: #141210;

    --brand:       #6AAB7E;
    --brand-fg:    #141210;
    --brand-muted: #1A3322;

    /* Status colors */
    --green:        #4ADE80;
    --green-bg:     #052E16;
    --green-border: #14532D;

    --amber:        #FBBF24;
    --amber-bg:     #1C1200;
    --amber-border: #3D2800;

    --red:        #F87171;
    --red-bg:     #1C0000;
    --red-border: #3D0000;

    --blue: #60A5FA;

    --c-blue-bg:   #1E3A5F; --c-blue-fg:   #93C5FD;
    --c-green-bg:  #14532D; --c-green-fg:  #86EFAC;
    --c-amber-bg:  #3D2800; --c-amber-fg:  #FCD34D;
    --c-coral-bg:  #4C0519; --c-coral-fg:  #FDA4AF;
    --c-teal-bg:   #134E4A; --c-teal-fg:   #5EEAD4;
    --c-pink-bg:   #500724; --c-pink-fg:   #F9A8D4;
    --c-purple-bg: #3B0764; --c-purple-fg: #D8B4FE;

    --shadow:    0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.45);
  }
}