/* ============================================================
   CloudSaveCircuit — cloudsavecircuit.games
   Direction: #7 Tactile Neo-Skeuomorphic Cards (2026)
   Warm cream ground, terracotta accent, DM Serif Display + DM Sans.
   Soft shadows, inset chips, pill buttons, paper-clay surfaces,
   raised cards, inset controls, tactile score badges.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  /* Surfaces — warm cream & paper-clay */
  --bg:           #F2EFE8;  /* ground */
  --bg-soft:      #EDE9E0;
  --surface:      #FBF8F1;  /* card surface (raised) */
  --surface-2:    #F6F1E6;
  --surface-sunk: #E8E2D4;  /* inset / recessed control */
  --surface-raise:#FFFFFF;  /* highest raised element */

  /* Ink / text — warm near-black (AA-checked on cream) */
  --ink:          #22201C;  /* headings */
  --text:         #2C2924;  /* body */
  --text-muted:   #5C564C;  /* AA on cream */
  --text-faint:   #8A8275;  /* caption/meta only */
  --on-accent:    #FFFFFF;  /* text on terracotta fills */
  --on-accent-ink:#3A2A12;  /* dark text on light accent tint */

  /* Lines — low-alpha ink */
  --border:        rgba(34, 32, 28, 0.10);
  --border-strong: rgba(34, 32, 28, 0.18);
  --rule:          rgba(34, 32, 28, 0.08);

  /* Brand accent — terracotta */
  --accent:        #B7782A;  /* fills, borders, large display */
  --accent-soft:   #D9A45E;
  --accent-tint:   rgba(183, 120, 42, 0.10);
  --accent-ink:    #8E5A1B;  /* AA terracotta text on cream */
  --accent-bright: #C9882F;
  --accent-line:   rgba(183, 120, 42, 0.40);

  /* Positive — spa/wellness green */
  --positive:      #2F7D5C;
  --positive-soft: #6FAE91;
  --positive-tint: rgba(47, 125, 92, 0.10);
  --positive-ink:  #1F5A41;

  /* Status (AA on cream) */
  --good:    #2F7D5C;
  --warn:    #B05A2A;
  --promo:   #B7782A;  /* fills only */

  /* Type */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2.2rem, 1.5vw + 1.5rem, 3.7rem);
  --fs-h2: clamp(1.6rem, 0.9vw + 1.25rem, 2.4rem);
  --fs-h3: clamp(1.2rem, 0.5vw + 1.05rem, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-cap: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --track-tight: -0.015em;
  --track-cap: 0.12em;

  /* Spacing (8px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Layout */
  --maxw: min(1280px, 92vw);
  --maxw-narrow: min(860px, 92vw);
  --gap: 24px;
  --gap-tight: 16px;

  /* Radii — tactile, soft, generous */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Shadows — tactile: soft outer + inset (paper-clay) */
  --shadow-1: 0 1px 2px rgba(60, 50, 35, 0.06), 0 6px 16px rgba(60, 50, 35, 0.08);
  --shadow-2: 0 12px 30px rgba(60, 50, 35, 0.12), 0 2px 6px rgba(60, 50, 35, 0.06);
  --shadow-raise: 0 18px 40px rgba(60, 50, 35, 0.16), 0 2px 8px rgba(60, 50, 35, 0.08);
  /* inset (recessed control) */
  --shadow-inset: inset 0 2px 5px rgba(60, 50, 35, 0.14), inset 0 -1px 1px rgba(255,255,255,0.5);
  --shadow-inset-soft: inset 0 1px 3px rgba(60, 50, 35, 0.10);
  /* accent glow */
  --shadow-accent: 0 10px 26px rgba(183, 120, 42, 0.22), 0 2px 6px rgba(183, 120, 42, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-press: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 220ms;

  /* Focus */
  --focus: 2px solid var(--accent-ink);
  --focus-offset: 2px;
}