/* ============================================================
   Foodmapme — Design Tokens
   warm / foodie / cozy · geometric sans · light + dark
   ทุกค่าเป็น CSS custom properties เพื่อให้ปรับแก้และนำไปต่อยอดได้ง่าย
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Typeface ---- */
  --font-sans: 'Anuphan', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* ---- Type scale (responsive, fluid) ---- */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3.5rem;
  --sp-9: 5rem;     --sp-10: 7rem;

  /* ---- Radius (scaled by --radius-mult so the "soft / rounded" tweak works) ---- */
  --radius-mult: 1;
  --r-sm: calc(8px * var(--radius-mult));
  --r-md: calc(14px * var(--radius-mult));
  --r-lg: calc(20px * var(--radius-mult));
  --r-xl: calc(28px * var(--radius-mult));
  --r-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --header-h: 68px;
  --ease: cubic-bezier(.4, .8, .3, 1);

  /* ============================================================
     ACCENT — switched via [data-accent]; default = mandarin
     warm oranges, all tuned to read on both light & dark
     ============================================================ */
  --brand-softer: oklch(0.97 0.025 55);
  --brand-soft:   oklch(0.93 0.06 52);
  --brand:        oklch(0.69 0.175 45);
  --brand-strong: oklch(0.61 0.17 42);
  --on-brand:     #fff;
  --brand-rgb: 240, 110, 50;
}

/* ---- Accent variations (the 2–3 directions) ---- */
[data-accent="mandarin"] {
  --brand-softer: oklch(0.97 0.025 55);
  --brand-soft:   oklch(0.92 0.07 52);
  --brand:        oklch(0.69 0.175 45);
  --brand-strong: oklch(0.61 0.17 42);
  --on-brand: #fff;
  --brand-rgb: 240, 110, 50;
}
[data-accent="tomato"] {
  --brand-softer: oklch(0.965 0.03 25);
  --brand-soft:   oklch(0.91 0.08 22);
  --brand:        oklch(0.635 0.205 27);
  --brand-strong: oklch(0.56 0.19 26);
  --on-brand: #fff;
  --brand-rgb: 226, 74, 58;
}
[data-accent="mango"] {
  --brand-softer: oklch(0.97 0.035 85);
  --brand-soft:   oklch(0.91 0.09 82);
  --brand:        oklch(0.74 0.155 70);
  --brand-strong: oklch(0.64 0.15 66);
  --on-brand: #3a2a00;
  --brand-rgb: 232, 162, 36;
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg:        oklch(0.992 0.006 75);
  --bg-tint:   oklch(0.975 0.012 68);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.978 0.008 70);
  --surface-3: oklch(0.962 0.01 68);
  --border:    oklch(0.915 0.009 68);
  --border-strong: oklch(0.86 0.012 65);

  --ink:    oklch(0.245 0.014 55);
  --ink-2:  oklch(0.46 0.012 58);
  --ink-3:  oklch(0.62 0.01 60);
  --ink-inv: oklch(0.99 0.004 75);

  --success:      oklch(0.6 0.13 158);
  --success-soft: oklch(0.94 0.06 158);
  --on-success:   #fff;
  --star:         oklch(0.78 0.15 78);

  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06), 0 1px 3px rgba(60, 40, 20, .05);
  --shadow-md: 0 4px 12px rgba(60, 40, 20, .07), 0 2px 4px rgba(60, 40, 20, .05);
  --shadow-lg: 0 14px 34px rgba(50, 33, 16, .1), 0 5px 12px rgba(50, 33, 16, .06);
  --shadow-xl: 0 28px 60px rgba(45, 30, 14, .16), 0 10px 24px rgba(45, 30, 14, .08);
  --ring: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
}

/* ============================================================
   DARK THEME — warm charcoal, not pure black
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        oklch(0.195 0.012 55);
  --bg-tint:   oklch(0.225 0.014 52);
  --surface:   oklch(0.245 0.014 55);
  --surface-2: oklch(0.285 0.016 54);
  --surface-3: oklch(0.32 0.018 54);
  --border:    oklch(0.34 0.016 54);
  --border-strong: oklch(0.42 0.02 54);

  --ink:    oklch(0.96 0.008 75);
  --ink-2:  oklch(0.8 0.012 70);
  --ink-3:  oklch(0.64 0.014 64);
  --ink-inv: oklch(0.2 0.012 55);

  --brand-softer: color-mix(in oklab, var(--brand) 14%, var(--surface));
  --brand-soft:   color-mix(in oklab, var(--brand) 26%, var(--surface));

  --success:      oklch(0.7 0.14 158);
  --success-soft: color-mix(in oklab, var(--success) 22%, var(--surface));
  --star:         oklch(0.82 0.15 80);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,.42);
  --shadow-lg: 0 16px 38px rgba(0,0,0,.5);
  --shadow-xl: 0 30px 64px rgba(0,0,0,.6);
  --ring: 0 0 0 4px color-mix(in oklab, var(--brand) 34%, transparent);
}