/* Shared design tokens: every name a theme can set, with neutral defaults.
   The active theme (web/themes/<name>.css, picked by the loader in index.html) overrides these on
   :root[data-theme="<name>"], for light and dark. Components (kit.css, web.css) only read tokens. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/geist.woff2") format("woff2"); }

:root {
  /* color: surfaces and ink (the -rgb twins feed translucent hairlines and washes) */
  --bone: #f1efea; --bone-rgb: 241 239 234;
  --card: #fbfaf7; --card-rgb: 251 250 247;
  --ink: #261a12; --ink-rgb: 38 26 18;
  --ink-2: #5a4a3e; --muted: #6f6157; --faint: #a3968b;
  --line: rgb(var(--ink-rgb) / .12);
  --clay: #a05332; --clay-rgb: 160 83 50; --deep: #7c3b22;
  --sand: #e6ddd0; --tint: #efe8de;
  --on-ink: var(--card);
  /* the six areas */
  --values: #2d67d1; --drives: #e0573a; --life: #0e9b86; --goals: #8a5fd6; --tastes: #d2418f; --world: #a87400;
  /* states */
  --green-bg: #e3eee5; --green: #1c4a2b; --green-line: #9cc3a7; --red-bg: #f5e3dc; --red: #6b2414; --danger: #b3261e;
  /* desktop stage behind the phone column */
  --stage-1: #ebe5db; --stage-2: #d6cec2;

  /* type: display serif, body, small labels */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;
  --label: var(--sys);
  --label-size: 11px; --label-track: .09em; --label-case: uppercase;

  /* personal mark (web/mark.js): paper must match the page so pair overlaps knock out cleanly */
  --mark-ink: var(--ink); --mark-accent: var(--clay); --mark-paper: var(--bone);

  /* lines, radii, shadows, materials */
  --hair: rgb(var(--ink-rgb) / .16);
  --hair-2: rgb(var(--ink-rgb) / .09);
  --r-xl: 28px; --r-l: 22px; --r-m: 16px; --r-s: 12px; --r-btn: 999px;
  --sh-1: 0 0.5px 0 rgb(var(--ink-rgb) / .05), 0 1px 2px rgb(var(--ink-rgb) / .04), 0 8px 20px -12px rgb(var(--ink-rgb) / .14);
  --sh-2: 0 1px 2px rgb(var(--ink-rgb) / .06), 0 14px 32px -14px rgb(var(--ink-rgb) / .26), 0 40px 72px -40px rgb(var(--ink-rgb) / .30);
  --sh-btn: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 1px rgb(var(--ink-rgb) / .25), 0 10px 22px -10px rgb(var(--ink-rgb) / .55);
  --mat: rgb(var(--bone-rgb) / .74);
  --mat-card: rgb(var(--card-rgb) / .86);
  --grain: .34;

  /* spacing rhythm */
  --gut: 20px; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;

  /* layout on a laptop (web/desk.css reads these; a look may override any of them, none is required) */
  --d-rail: 232px;                         /* the left rail */
  --d-pad: clamp(32px, 4vw, 72px);         /* page margin inside the main area */
  --d-gap: clamp(32px, 3.6vw, 64px);       /* between two columns */
  --d-read: 620px;                         /* one column of reading */
  --d-main: 1180px;                        /* a two-column screen */
  --d-step: 600px;                         /* the step pane in onboarding */
  --d-two: 980px;                          /* a screen of two plain columns (Settings, Sources) */
  --d-art: min(62vh, 34vw, 520px);         /* the mark in the art pane */
  --d-hero-mark: 220px;                    /* your mark at the top of Home (a look with a side-by-side hero sets less) */
  --d-title: clamp(44px, 3.4vw, 58px);     /* screen titles */
  --d-name: clamp(56px, 4.6vw, 80px);      /* a person's name on Home and the reveal */
  --d-text: 17px;                          /* body text */
  --d-art-bg: var(--tint);                 /* the art pane's paper */
  --d-rail-bg: var(--bone);
  --d-focus: rgb(var(--ink-rgb) / .55);    /* focus rings */
  --d-hover: rgb(var(--ink-rgb) / .045);   /* hover wash on rows */

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.32, .72, 0, 1);
  --spring-b: cubic-bezier(.34, 1.25, .5, 1);
  --spring-pop: cubic-bezier(.34, 1.5, .5, 1);
  --t-enter: .7s; --t-reveal: 1s;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* critically damped-ish spring for pushes, a touch of overshoot for sheets, a lively one for presses */
    --spring: linear(0, 0.0236, 0.082, 0.1605, 0.2485, 0.339, 0.427, 0.5095, 0.5848, 0.6522, 0.7113, 0.7626, 0.8064, 0.8434, 0.8744, 0.9002, 0.9213, 0.9385, 0.9525, 0.9636, 0.9725, 0.9795, 0.9849, 0.9891, 0.9924, 0.9948, 0.9966, 0.9979, 0.9989, 0.9996, 1);
    --spring-b: linear(0, 0.0274, 0.0961, 0.1891, 0.2938, 0.4011, 0.5045, 0.6001, 0.6854, 0.7593, 0.8218, 0.8732, 0.9146, 0.947, 0.9717, 0.9898, 1.0027, 1.0112, 1.0164, 1.0191, 1.0199, 1.0195, 1.0181, 1.0163, 1.0142, 1.0121, 1.01, 1.0081, 1.0064, 1.0049, 1.0036, 1.0026, 1.0018, 1.0011, 1.0006, 1.0002, 1);
    --spring-pop: linear(0, 0.0398, 0.1395, 0.2737, 0.4218, 0.5685, 0.7032, 0.8194, 0.9141, 0.9866, 1.0382, 1.0713, 1.089, 1.0947, 1.0916, 1.0826, 1.0701, 1.0561, 1.0421, 1.0292, 1.018, 1.0089, 1.0018, 0.9967, 0.9935, 0.9917, 0.991, 0.9913, 0.9921, 0.9932, 0.9946, 0.9959, 0.9971, 0.9982, 0.9991, 0.9998, 1);
  }
}

/* ---------- shared by every theme: calm surfaces, no glass, no gradients, no glow ----------
   Scoped to :root[data-theme] so it outranks kit.css whatever the load order. */
:root[data-theme] body { background: var(--bone); }
:root[data-theme] .tabbar, :root[data-theme] .scr.scrolled .nav { background: var(--bone); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme] .tabbar { box-shadow: 0 -.5px 0 var(--hair); }
:root[data-theme] .tab { color: var(--muted); }
:root[data-theme] .tab.on { color: var(--ink); }
:root[data-theme] .tab.on svg circle, :root[data-theme] .tab.on svg path { fill-opacity: 0; }
:root[data-theme] .sheet, :root[data-theme] .as-g, :root[data-theme] .al { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -.5px 0 var(--hair); }
:root[data-theme] .toast { background: var(--ink); color: var(--bone); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-theme] .btn, :root[data-theme] .btn.clay { background: var(--ink); color: var(--bone); box-shadow: none; }
:root[data-theme] .btn.clay { background: var(--clay); }
:root[data-theme] .btn2 { background: transparent; border: .5px solid rgb(var(--ink-rgb) / .35); color: var(--ink); }
:root[data-theme] .card, :root[data-theme] .group, :root[data-theme] .frow, :root[data-theme] .svc, :root[data-theme] .field, :root[data-theme] textarea, :root[data-theme] .jfield input, :root[data-theme] .area-b, :root[data-theme] .aibtn, :root[data-theme] .addbtn { box-shadow: none; }
:root[data-theme] .field:focus-within, :root[data-theme] textarea:focus, :root[data-theme] .jfield input:focus { box-shadow: none; border-color: var(--ink); }
:root[data-theme] .jfield input, :root[data-theme] .field, :root[data-theme] textarea { background: transparent; }
/* service glyphs and settings icons are stamped in ink, not brand colors */
:root[data-theme] .row .ri { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .45); }
:root[data-theme] .glyph, :root[data-theme] .gl2 { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .45) !important; }
/* the dark plates (today's question, "You could") become framed notes that work in light and dark */
:root[data-theme] .qcard, :root[data-theme] .could { background: var(--card); color: var(--ink); border: .5px solid var(--hair); box-shadow: none; }
:root[data-theme] .qcard .k, :root[data-theme] .could .k { color: var(--muted); }
:root[data-theme] .qcard .qm { color: var(--muted); }
:root[data-theme] .qcard .go { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .45); }
:root[data-theme] .could .ask { border-top: .5px solid var(--hair); }
:root[data-theme] .could .ask p { color: var(--ink-2); }
/* blurred teaser becomes a plain invitation row */
:root[data-theme] .lock .blur { visibility: hidden; }
:root[data-theme] .lock .lbl { background: transparent; }
:root[data-theme] .lock .lbl span { color: var(--clay); }
/* decisions: outlined, never filled candy */
:root[data-theme] .pill { background: transparent; border: .5px solid rgb(var(--ink-rgb) / .35); color: var(--ink); }
:root[data-theme] .pill.yes { border-color: var(--ink); }
:root[data-theme] .stamp.yes, :root[data-theme] .stamp.no { background: var(--card); }
:root[data-theme] .tag.s { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
:root[data-theme] .tag.e { color: var(--muted); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .35); }
:root[data-theme] .badge { box-shadow: none; }
:root[data-theme] .demo { background: transparent; box-shadow: inset 0 0 0 .5px var(--hair); }
:root[data-theme] .dots i { background: rgb(var(--ink-rgb) / .14); }
:root[data-theme] .dots i.on { background: var(--ink); }
:root[data-theme] .avatar { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .45); }
:root[data-theme] .linkbox button { background: var(--ink); color: var(--bone); }
:root[data-theme] .icb.fill, :root[data-theme] .chip, :root[data-theme] .vis, :root[data-theme] .ic .src span { background: transparent; box-shadow: inset 0 0 0 .5px var(--hair); }
:root[data-theme] .scr { box-shadow: -1px 0 0 var(--hair-2); }