/*
  Maher Design Guide — design tokens
  Palette sampled from three photos of the house (k-means color extraction).

  Design rule that was missing before: NEUTRALS STAY DESATURATED. The "sand"
  ramp below is built from the chair fabric's actual low-chroma greige, not
  from the wood — using a saturated material as a background ramp is what
  made the first pass look pink/salmon instead of a clean neutral. Maple is
  its own accent ramp now, kept OFF backgrounds, used the way the table
  actually reads in the room: warm, present, but not everywhere.

  Roles: primary = dusty blue (the pillow's check). Secondary = maple (the
  table). Tertiary = sage (one muted cabinet-door sample) — present for
  reference, used rarely, not showcased as a component color.
*/

:root {
  /* ---------- Sand (neutral — low-chroma greige, from the chair fabric) ---------- */
  --sand-50:  #F9F7F6;
  --sand-100: #F1EDEA;
  --sand-200: #E2DCD5;
  --sand-300: #CCC2B8;
  --sand-400: #B0A396;
  --sand-500: #958475;
  --sand-600: #746558;
  --sand-700: #594B40;
  --sand-800: #3F342C;
  --sand-900: #2B231D;
  --sand-950: #181411;

  /* ---------- Dusty blue (primary — the check woven into the pillow plaid) ---------- */
  --blue-100: #EFF4F5;
  --blue-200: #DAE5E8;
  --blue-300: #BDD0D5;
  --blue-400: #9FB8BF;
  --blue-500: #82A0A8;
  --blue-600: #648088;
  --blue-700: #4C636A;
  --blue-800: #38494E;

  /* ---------- Maple (secondary — the table, a real accent, kept off backgrounds) ---------- */
  --maple-100: #F7ECE3;
  --maple-200: #EDD4C0;
  --maple-300: #DEB18C;
  --maple-400: #CF8C59;
  --maple-500: #B06D3B; /* true table sample */
  --maple-600: #8A562E;
  --maple-700: #673F22;
  --maple-800: #482C19;

  /* ---------- Sage (tertiary — one muted cabinet sample; reference only, used rarely) ---------- */
  --sage-100: #F2F1E6;
  --sage-200: #E3E0C8;
  --sage-300: #CBC69C;
  --sage-400: #B0A97D;
  --sage-500: #928C64;
  --sage-600: #726C4A;
  --sage-700: #565138;
  --sage-800: #3D3A28;

  /* ---------- Functional (kept in-family; terracotta is the one true one-off) ---------- */
  --terracotta-500: #A8503A;
  --terracotta-400: #C97456;
  --terracotta-100: #F3DED4;
  --terracotta-900: #3A251D;

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Light theme semantic tokens (default) ---------- */
  --bg: var(--sand-50);
  --surface: #FFFFFF;
  --surface-2: var(--sand-100);
  --border: var(--sand-300);
  --border-strong: var(--sand-400);
  --text: var(--sand-900);
  --text-muted: var(--sand-600);

  --primary: var(--blue-700);
  --primary-hover: var(--blue-800);
  --primary-tint: var(--blue-100);
  --on-primary: #FFFFFF;

  --secondary: var(--maple-600);
  --secondary-hover: var(--maple-700);
  --secondary-tint: var(--maple-100);
  --on-secondary: #FFFFFF;

  --tertiary: var(--sage-600);
  --tertiary-hover: var(--sage-700);
  --tertiary-tint: var(--sage-100);
  --on-tertiary: #FFFFFF;

  --accent: var(--sand-900);
  --accent-tint: var(--sand-100);

  --success: var(--sage-600);
  --success-tint: var(--sage-100);
  --warning: var(--maple-500);
  --warning-tint: var(--maple-100);
  --error: var(--terracotta-500);
  --error-tint: var(--terracotta-100);

  --focus-ring: var(--blue-500);
  --shadow-color: 30 20 12;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 1px 1px rgb(var(--shadow-color) / 0.04);
  --shadow-md: 0 4px 12px rgb(var(--shadow-color) / 0.08), 0 2px 4px rgb(var(--shadow-color) / 0.05);
  --shadow-lg: 0 12px 32px rgb(var(--shadow-color) / 0.12), 0 4px 8px rgb(var(--shadow-color) / 0.06);
}

/* ---------- Dark theme: system preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--sand-950);
    --surface: var(--sand-900);
    --surface-2: var(--sand-800);
    --border: var(--sand-700);
    --border-strong: var(--sand-600);
    --text: var(--sand-50);
    --text-muted: var(--sand-400);

    --primary: var(--blue-400);
    --primary-hover: var(--blue-300);
    --primary-tint: #24343A;
    --on-primary: var(--sand-950);

    --secondary: var(--maple-400);
    --secondary-hover: var(--maple-300);
    --secondary-tint: #3A2415;
    --on-secondary: var(--sand-950);

    --tertiary: var(--sage-400);
    --tertiary-hover: var(--sage-300);
    --tertiary-tint: #322F1F;
    --on-tertiary: var(--sand-950);

    --accent: var(--sand-50);
    --accent-tint: var(--sand-800);

    --success: var(--sage-400);
    --success-tint: #322F1F;
    --warning: var(--maple-400);
    --warning-tint: #3A2415;
    --error: var(--terracotta-400);
    --error-tint: var(--terracotta-900);

    --focus-ring: var(--blue-400);
    --shadow-color: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.3);
    --shadow-md: 0 4px 12px rgb(var(--shadow-color) / 0.35);
    --shadow-lg: 0 12px 32px rgb(var(--shadow-color) / 0.45);
  }
}

/* ---------- Dark theme: explicit toggle (wins in both directions) ---------- */
:root[data-theme="dark"] {
  --bg: var(--sand-950);
  --surface: var(--sand-900);
  --surface-2: var(--sand-800);
  --border: var(--sand-700);
  --border-strong: var(--sand-600);
  --text: var(--sand-50);
  --text-muted: var(--sand-400);

  --primary: var(--blue-400);
  --primary-hover: var(--blue-300);
  --primary-tint: #24343A;
  --on-primary: var(--sand-950);

  --secondary: var(--maple-400);
  --secondary-hover: var(--maple-300);
  --secondary-tint: #3A2415;
  --on-secondary: var(--sand-950);

  --tertiary: var(--sage-400);
  --tertiary-hover: var(--sage-300);
  --tertiary-tint: #322F1F;
  --on-tertiary: var(--sand-950);

  --accent: var(--sand-50);
  --accent-tint: var(--sand-800);

  --success: var(--sage-400);
  --success-tint: #322F1F;
  --warning: var(--maple-400);
  --warning-tint: #3A2415;
  --error: var(--terracotta-400);
  --error-tint: var(--terracotta-900);

  --focus-ring: var(--blue-400);
  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.3);
  --shadow-md: 0 4px 12px rgb(var(--shadow-color) / 0.35);
  --shadow-lg: 0 12px 32px rgb(var(--shadow-color) / 0.45);
}