/* ============================================================
   PICNIC MOMENT — Website Design System
   Token layer: color, type, space, radius, shadow, glass, motion
   Grounded in the app's warm-paper + Liquid Glass aesthetic.
   ============================================================ */

/* ---- Fonts (Nunito Sans ≈ Avenir; real Avenir on Apple devices) ---- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;1,6..12,400&family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Brand accent (tweakable: set --accent, rest derive) ---------- */
  --accent:        #d8703a;   /* terracotta — warm picnic primary */
  --accent-strong: color-mix(in srgb, var(--accent) 84%, #000);  /* pressed / deep */
  --accent-soft:   color-mix(in srgb, var(--accent) 15%, var(--surface)); /* tinted fill */
  --brass:         #b4863a;   /* gold/brass — the app's functional accent */
  --brass-soft:    color-mix(in srgb, var(--brass) 20%, var(--surface));

  /* ---------- Module spectrum (the app's content-category colors) ---------- */
  --mod-text:   #ff8500;   /* writing */
  --mod-draw:   #fe8e29;   /* canvas / pencil */
  --mod-photo:  #9359ff;   /* image / video */
  --mod-music:  #fe2d55;   /* music */
  --mod-mood:   #16c2d4;   /* mood / state of mind */
  --mod-move:   #34c759;   /* exercise */
  --mod-place:  #3e8bff;   /* location */
  --mod-ink:    #3e3a33;   /* voice / misc */

  /* ---------- Surfaces & ink (LIGHT — warm paper) ---------- */
  --paper:          #f3e7ca;   /* page base */
  --paper-2:        #efe1bf;   /* deeper paper, alt sections */
  --surface:        #faf1da;   /* card */
  --surface-2:      #f6ebcf;   /* nested / subtle card */
  --surface-tinted: #eee2bd;   /* pill / chips */
  --ink:            #211c14;   /* primary text */
  --ink-2:          #6f6857;   /* secondary text */
  --ink-3:          #9a8f76;   /* tertiary / captions */
  --ink-brown:      #9e7740;   /* numerals / brand metric */
  --hairline:       rgba(60,46,20,0.12);
  --hairline-soft:  rgba(60,46,20,0.07);

  /* ---------- Glass ---------- */
  --glass-fill:     rgba(250,241,218,0.62);
  --glass-border:   rgba(255,255,255,0.55);
  --glass-blur:     22px;
  --glass-sat:      1.5;
  --glass-hi:       inset 0 1px 0 rgba(255,255,255,0.65);

  /* ---------- Shadows (warm, soft — Liquid Glass) ---------- */
  --shadow-xs: 0 1px 2px rgba(74,52,18,0.06);
  --shadow-sm: 0 2px 8px rgba(74,52,18,0.07), 0 1px 2px rgba(74,52,18,0.05);
  --shadow-md: 0 8px 24px rgba(74,52,18,0.09), 0 2px 6px rgba(74,52,18,0.05);
  --shadow-lg: 0 20px 50px rgba(74,52,18,0.12), 0 6px 16px rgba(74,52,18,0.06);
  --shadow-glass: 0 16px 48px rgba(74,52,18,0.14);
  --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);

  /* ---------- Type ---------- */
  --font-sans: 'Nunito Sans', 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-feat: "ss01" 1, "cv11" 1;

  --t-display: clamp(48px, 7vw, 84px);
  --t-title1:  clamp(38px, 5vw, 56px);
  --t-title2:  clamp(30px, 3.4vw, 40px);
  --t-title3:  28px;
  --t-headline: 22px;
  --t-body:    18px;
  --t-callout: 16px;
  --t-subhead: 15px;
  --t-foot:    13px;
  --t-caption: 12px;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  --trk-display: -0.022em;
  --trk-title:   -0.014em;
  --trk-body:    0em;
  --trk-caps:    0.14em;

  /* ---------- Space (4-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; --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
  --r-xl: 36px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0.16, 0.12, 1);
  --ease-out: cubic-bezier(0.16, 0.8, 0.24, 1);
  --dur-1: 0.14s; --dur-2: 0.26s; --dur-3: 0.5s;

  /* container */
  --maxw: 1160px;
}

/* ---------- DARK (warm espresso) ---------- */
[data-theme="dark"] {
  --accent:        #f0894a;
  --accent-strong: color-mix(in srgb, var(--accent) 78%, #fff);
  --accent-soft:   color-mix(in srgb, var(--accent) 22%, var(--surface));
  --brass:         #d9b45c;
  --brass-soft:    color-mix(in srgb, var(--brass) 22%, var(--surface));

  --paper:          #16120c;
  --paper-2:        #1d1810;
  --surface:        #221c13;
  --surface-2:      #2a2218;
  --surface-tinted: #2f2719;
  --ink:            #f4ead3;
  --ink-2:          #b3a888;
  --ink-3:          #897f66;
  --ink-brown:      #d9b45c;
  --hairline:       rgba(255,236,190,0.12);
  --hairline-soft:  rgba(255,236,190,0.06);

  --glass-fill:   rgba(34,28,19,0.55);
  --glass-border: rgba(255,236,190,0.14);
  --glass-hi:     inset 0 1px 0 rgba(255,236,190,0.10);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.58);
  --shadow-glass: 0 18px 56px rgba(0,0,0,0.6);

  --mod-text:#ff9a33;--mod-draw:#ffa54d;--mod-photo:#a974ff;--mod-music:#ff5e7c;
  --mod-mood:#3ad3e3;--mod-move:#4ad968;--mod-place:#5ba0ff;--mod-ink:#cdbfa2;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }