/* Floofy design tokens, in Alara's tiers: primitives, semantic, content, system. Raw colours live only here; see DESIGN.md. */

/* ---------- primitives: the brand palette, same in both themes. Higher step is darker. */
:root{
  --white:#fff; --black:#000;
  --cream-25:#fffdf9; --cream-50:#fbf8f2; --cream-100:#f6f1e7; --cream-150:#f3ede3; --cream-200:#ece5da; --cream-300:#dcd3c6;
  --brown-300:#c9a77c; --brown-600:#4a433b; --brown-700:#3a3128; --brown-800:#2b2118; --brown-850:#2a241d;
  --brown-900:#221d17; --brown-920:#1d1914; --brown-950:#16130f;
  --terracotta-200:#f3c9a4; --terracotta-400:#c4713a; --terracotta-500:#b8622a;
  --sage-200:#cfd8cc; --sage-300:#b9c6b8; --sage-400:#5d8a6f; --sage-500:#4f7a61;
  --sage-700:#2f4a3a; --sage-800:#263c2f; --sage-850:#243b2e; --sage-900:#22342a;

  --serif:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-md:14px; --text-base:15px; --text-lg:16px;
  --text-xl:19px; --text-2xl:26px; --text-3xl:32px; --text-display:44px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px;
  --radius-xs:3px; --radius-sm:4px; --radius:5px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-pill:999px;
}

/* ---------- semantic: what pages and components read. Light first, then dark twice (auto and pinned). */
:root{
  color-scheme:light;
  --surface:var(--cream-50); --surface-2:var(--cream-150); --surface-card:var(--cream-25);
  --hover:rgba(43,33,24,.05); --hover-2:rgba(43,33,24,.09);
  --ink:var(--brown-800); --ink-2:rgba(43,33,24,.68); --ink-3:rgba(43,33,24,.46);
  --hairline:rgba(43,33,24,.1); --hairline-2:rgba(43,33,24,.18);
  --shadow:rgba(43,33,24,.06) 0 0 0 1px,rgba(43,33,24,.1) 0 3px 6px,rgba(43,33,24,.16) 0 9px 24px;
  --accent:var(--terracotta-500); --accent-bg:rgba(184,98,42,.12); --deemph:var(--cream-300); --grid:var(--cream-200);
  --pri:var(--sage-700); --pri-h:var(--sage-850); --pri-ink:var(--cream-100);
  --hero:var(--sage-800); --hero-ink:var(--cream-100); --hero-sub:var(--sage-200); --hero-bar:var(--brown-300); --toast:var(--brown-800);
  --good:#4a6b50; --good-bg:#dde5d7; --warn:#a07a2c; --warn-bg:#efe3c7; --bad:#a4452f; --bad-bg:#f1dcd3;
  --info:#4f6b76; --info-bg:#dde4e3; --purple:#76606e; --purple-bg:#e7dde2; --pink:#9a5a5f; --pink-bg:#efdcdb;
  /* Tag hues (purple, pink, brown, gray, orange), not primitives: --brown here is unrelated to --brown-800. */
  --brown:#8a6448; --brown-bg:#ebdfd1; --gray:#7a7066; --gray-bg:#e9e2d7; --orange:#a8662e; --orange-bg:#efdcc6;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    color-scheme:dark;
    --surface:var(--brown-950); --surface-2:var(--brown-920); --surface-card:var(--brown-900);
    --hover:rgba(246,241,231,.05); --hover-2:rgba(246,241,231,.09);
    --ink:rgba(246,241,231,.9); --ink-2:rgba(246,241,231,.62); --ink-3:rgba(246,241,231,.42);
    --hairline:rgba(246,241,231,.08); --hairline-2:rgba(246,241,231,.15);
    --shadow:rgba(0,0,0,.25) 0 0 0 1px,rgba(0,0,0,.35) 0 3px 6px,rgba(0,0,0,.5) 0 9px 24px;
    --accent:var(--terracotta-400); --accent-bg:rgba(196,113,58,.2); --deemph:var(--brown-600); --grid:var(--brown-850);
    --pri:var(--sage-500); --pri-h:var(--sage-400); --pri-ink:var(--cream-100);
    --hero:var(--sage-900); --hero-ink:var(--cream-100); --hero-sub:var(--sage-300); --hero-bar:var(--brown-300); --toast:var(--brown-700);
    --good:#8fb394; --good-bg:#2c3d2f; --warn:#d9b56a; --warn-bg:#4a3e24; --bad:#e08b74; --bad-bg:#4d2b24;
    --info:#9db6be; --info-bg:#2a3638; --purple:#c2a9b8; --purple-bg:#3b2f36; --pink:#d9a0a4; --pink-bg:#472e30;
    --brown:#c9a37f; --brown-bg:#3d2f23; --gray:#a89e92; --gray-bg:#322b24; --orange:#e0a26b; --orange-bg:#47331f;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface:var(--brown-950); --surface-2:var(--brown-920); --surface-card:var(--brown-900);
  --hover:rgba(246,241,231,.05); --hover-2:rgba(246,241,231,.09);
  --ink:rgba(246,241,231,.9); --ink-2:rgba(246,241,231,.62); --ink-3:rgba(246,241,231,.42);
  --hairline:rgba(246,241,231,.08); --hairline-2:rgba(246,241,231,.15);
  --shadow:rgba(0,0,0,.25) 0 0 0 1px,rgba(0,0,0,.35) 0 3px 6px,rgba(0,0,0,.5) 0 9px 24px;
  --accent:var(--terracotta-400); --accent-bg:rgba(196,113,58,.2); --deemph:var(--brown-600); --grid:var(--brown-850);
  --pri:var(--sage-500); --pri-h:var(--sage-400); --pri-ink:var(--cream-100);
  --hero:var(--sage-900); --hero-ink:var(--cream-100); --hero-sub:var(--sage-300); --hero-bar:var(--brown-300); --toast:var(--brown-700);
  --good:#8fb394; --good-bg:#2c3d2f; --warn:#d9b56a; --warn-bg:#4a3e24; --bad:#e08b74; --bad-bg:#4d2b24;
  --info:#9db6be; --info-bg:#2a3638; --purple:#c2a9b8; --purple-bg:#3b2f36; --pink:#d9a0a4; --pink-bg:#472e30;
  --brown:#c9a37f; --brown-bg:#3d2f23; --gray:#a89e92; --gray-bg:#322b24; --orange:#e0a26b; --orange-bg:#47331f;
}
/* Older names, still read all over app.css and the views. New code uses the names above. */
:root{
  --bg:var(--surface); --side:var(--surface-2); --card:var(--surface-card); --hover2:var(--hover-2);
  --ink2:var(--ink-2); --ink3:var(--ink-3); --line:var(--hairline); --line2:var(--hairline-2);
  --accent-soft:var(--accent-bg); --blue:var(--info); --blue-bg:var(--info-bg);
}
/* Same in both themes: edges on cards, things drawn over photos and solid fills, the toast. */
:root{
  --edge:rgba(15,15,15,.1); --edge-soft:rgba(15,15,15,.08); --edge-strong:rgba(15,15,15,.18); --edge-on-dark:rgba(255,255,255,.08);
  --scrim:rgba(15,15,15,.3); --float-shadow:rgba(0,0,0,.4);
  --on-fill:var(--white); --on-fill-2:rgba(255,255,255,.75); --on-fill-line:rgba(255,255,255,.35);
  --photo-chip:rgba(0,0,0,.55); --photo-chip-strong:rgba(0,0,0,.6); --photo-wash:rgba(255,255,255,.35);
  --photo-fade:rgba(40,40,48,.88); --photo-fade-2:rgba(40,40,48,.45);
  --hero-track:rgba(255,255,255,.14); --hero-tint:rgba(246,241,231,.08); --hero-rule:rgba(246,241,231,.2);
  --toast-ink:var(--cream-100); --toast-action:var(--terracotta-200); --today:#eb5757; --logo-bg:var(--white); --mask-solid:var(--black);
  /* The Instagram grid mockup copies Instagram's own light profile. */
  --ig-frame:var(--black); --ig-frame-shadow:rgba(0,0,0,.5); --ig-bg:var(--white); --ig-ink:var(--black);
  --ig-ink-2:#737373; --ig-ink-3:#b5b5b5; --ig-line:#efefef; --ig-thumb:#eee; --ig-ring:#d62976; --ig-avatar:var(--sage-700);
}

/* ---------- content: pillar tags (--p-*, background plus -i ink) and series fills (--sc-*). */
/* .screen is the Instagram mockup, which keeps the light pillars whatever the theme. */
:root,.screen{
  --p-bad:#ffe2dd; --p-bad-i:#9d3a2f; --p-doodle:#fdecc8; --p-doodle-i:#7a5410; --p-mama:#f5e0e9; --p-mama-i:#8a3165;
  --p-upnorth:#dbeddb; --p-upnorth-i:#2f6a45; --p-ditl:#d3e5ef; --p-ditl-i:#245a7c; --p-trial:#e8deee; --p-trial-i:#5f3f7c;
}
:root{
  --p-sage:#e3ebe2; --p-sage-i:#3f5a45; --p-clay:#f1dfd4; --p-clay-i:#8a4a2c; --p-gold:#f3e7c9; --p-gold-i:#7a5b12;
  --p-plum:#ecdde8; --p-plum-i:#6a3a5c; --p-slate:#e3e6ea; --p-slate-i:#43505e;
  --sc-navy:#22365a; --sc-green:#2e4a3b; --sc-wine:#722636; --sc-cognac:#8a5526; --sc-plum:#4d3050; --sc-slate:#3d4650;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --p-bad:#5c2b2a; --p-bad-i:#ffb3ab; --p-doodle:#59481f; --p-doodle-i:#ffd98a; --p-mama:#69314c; --p-mama-i:#ffb3dd;
    --p-upnorth:#2b593f; --p-upnorth-i:#a6e3bd; --p-ditl:#28456c; --p-ditl-i:#a8d4f5; --p-trial:#492f64; --p-trial-i:#d8bdf5;
    --p-sage:#2e4432; --p-sage-i:#b7d4bc; --p-clay:#4c3024; --p-clay-i:#f0b99c; --p-gold:#4d4020; --p-gold-i:#f2d58c;
    --p-plum:#43283b; --p-plum-i:#e8b9d8; --p-slate:#2f353c; --p-slate-i:#c3ccd6;
    --sc-navy:#3d5f93; --sc-green:#3f6a52; --sc-wine:#9c3b4e; --sc-cognac:#a8703a; --sc-plum:#74507a; --sc-slate:#5b6672;
  }
}
:root[data-theme="dark"]{
  --p-bad:#5c2b2a; --p-bad-i:#ffb3ab; --p-doodle:#59481f; --p-doodle-i:#ffd98a; --p-mama:#69314c; --p-mama-i:#ffb3dd;
  --p-upnorth:#2b593f; --p-upnorth-i:#a6e3bd; --p-ditl:#28456c; --p-ditl-i:#a8d4f5; --p-trial:#492f64; --p-trial-i:#d8bdf5;
  --p-sage:#2e4432; --p-sage-i:#b7d4bc; --p-clay:#4c3024; --p-clay-i:#f0b99c; --p-gold:#4d4020; --p-gold-i:#f2d58c;
  --p-plum:#43283b; --p-plum-i:#e8b9d8; --p-slate:#2f353c; --p-slate-i:#c3ccd6;
  --sc-navy:#3d5f93; --sc-green:#3f6a52; --sc-wine:#9c3b4e; --sc-cognac:#a8703a; --sc-plum:#74507a; --sc-slate:#5b6672;
}

/* ---------- system: sizes, layers, focus, motion. */
:root{
  --tap-min:44px; --safe-b:env(safe-area-inset-bottom,0px);
  --z-sticky:20; --z-nav:40; --z-fab:41; --z-scrim:60; --z-panel:61; --z-drawer:62; --z-dialog:70; --z-toast:80; --z-boot:100; --z-drag:200;
  --focus-ring:0 0 0 2px var(--accent-bg);
  --dur-fast:.12s; --dur:.18s; --dur-slow:.25s; --ease-out:cubic-bezier(.2,.8,.2,1);
  /* Density. Warm is the default everywhere: thumb-sized rows, and 16px inputs so iOS does not zoom. */
  --row-h:var(--tap-min); --row-fs:var(--text-base); --input-fs:var(--text-lg);
}
/* Work density: pages that set data-density="work" go dense, but only on a wide screen. */
@media (min-width:900px){
  [data-density="work"]{--row-h:32px; --row-fs:var(--text-sm); --input-fs:var(--text-md);}
}