/* ============================================================
   tokens.css — design tokens for sendup
   Light + dark live here. Every component reads from these.
   Nothing hard-codes hex anywhere else in the app.
   ============================================================ */

:root,
[data-theme="light"] {
  /* surface */
  --bg:            #FAF7F2;
  --bg-elevated:   #FFFFFF;
  --bg-subtle:     #F2EDE5;
  --bg-inset:      #ECE6DC;

  /* type */
  --text:          #2A211C;
  --text-muted:    #6B5F57;
  --text-faint:    #A89A8F;
  --ink:           #3A2F2A;

  /* lines + edges */
  --border:        rgba(58, 47, 42, 0.10);
  --border-strong: rgba(58, 47, 42, 0.18);

  /* accent — one terracotta, used sparingly */
  --accent:        #C8634A;
  --accent-hover:  #B5563E;
  --accent-soft:   rgba(200, 99, 74, 0.10);

  /* semantic */
  --success:       #6E8B5A;
  --warn:          #C99846;
  --danger:        #B5443A;

  /* shadows — warm, tuned to the palette */
  --shadow-sm: 0 1px 2px rgba(58, 47, 42, 0.04), 0 1px 3px rgba(58, 47, 42, 0.06);
  --shadow:    0 4px 12px rgba(58, 47, 42, 0.06), 0 1px 3px rgba(58, 47, 42, 0.04);
  --shadow-lg: 0 24px 48px rgba(58, 47, 42, 0.10), 0 4px 12px rgba(58, 47, 42, 0.06);
}

[data-theme="dark"] {
  --bg:            #1A1815;
  --bg-elevated:   #221F1B;
  --bg-subtle:     #1F1C18;
  --bg-inset:      #15130F;

  --text:          #EAE4DA;
  --text-muted:    #948A7E;
  --text-faint:    #6B6359;
  --ink:           #EAE4DA;

  --border:        rgba(234, 228, 218, 0.08);
  --border-strong: rgba(234, 228, 218, 0.14);

  --accent:        #D87560;
  --accent-hover:  #E48871;
  --accent-soft:   rgba(216, 117, 96, 0.12);

  --success:       #8AA77A;
  --warn:          #D9AC60;
  --danger:        #D26A60;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30);
}

/* timing + shape — theme-independent */
:root {
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  --r-sm:  6px;
  --r:     10px;
  --r-lg:  16px;
}