/* FOCUS UI: shared design tokens for every FOCUS app (direction A, "FOCUS refinado").
   Source of truth: Documents/Claude Skills/focus-ui. Run focus-ui/sync.sh to copy into each app's public/focus-ui/.
   Apps alias their own variable names to these --f-* tokens; never hard-code colors in an app. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --f-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* surfaces: warm near-white stone */
  --f-bg: #faf8f5;
  --f-surface: #ffffff;
  --f-surface-2: #f5f1eb;
  --f-surface-3: #ede7df;
  --f-sidebar: #f3eee7;
  --f-sidebar-hover: #ebe4da;
  --f-sidebar-active: #ffffff;

  /* text + lines */
  --f-ink: #1c1917;
  --f-ink-2: #44403c;
  --f-muted: #78716c;
  --f-line: #ebe5dd;
  --f-line-strong: #dcd4c9;

  /* brand: terracotta */
  --f-accent: #b8613d;
  --f-accent-hover: #a2532f;
  --f-accent-ink: #94482a;   /* accent used as text on light surfaces */
  --f-accent-soft: #f6e8e0;
  --f-on-accent: #ffffff;

  /* semantic */
  --f-green: #1f7a4a;  --f-green-soft: #e6f4ec;
  --f-red: #c0392b;    --f-red-soft: #fbeae7;
  --f-amber: #a8670f;  --f-amber-soft: #fbf1df;
  --f-blue: #2f5fb3;   --f-blue-soft: #e8eefb;
  --f-violet: #6d48c7; --f-violet-soft: #f0ebfb;
  --f-gray-soft: #f1ede7;
  --f-pink: #b4366c;   --f-pink-soft: #fbe8f0;
  --f-teal: #0f766e;   --f-teal-soft: #e0f3f1;
  --f-indigo: #4338ca; --f-indigo-soft: #ebebfc;
  --f-orange: #c2570c; --f-orange-soft: #fdeedf;
  --f-lime: #4d7c0f;   --f-lime-soft: #eef6dc;
  --f-slate: #475569;  --f-slate-soft: #eaeef3;

  --f-overlay: rgba(20, 18, 16, .45);
  --f-shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
  --f-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 6px 20px rgba(28, 25, 23, .06);
  --f-shadow-lg: 0 24px 64px rgba(28, 25, 23, .18);
  --f-r-sm: 8px;
  --f-r: 12px;
  --f-r-lg: 18px;
  --f-focus: 0 0 0 3px rgba(184, 97, 61, .28);
}

/* Dark: follows macOS unless the user picked a theme (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --f-bg: #141210; --f-surface: #1c1917; --f-surface-2: #221e1b; --f-surface-3: #2b2622;
    --f-sidebar: #181513; --f-sidebar-hover: #221e1b; --f-sidebar-active: #2b2622;
    --f-ink: #f5f2ee; --f-ink-2: #d6d3d1; --f-muted: #a8a29e; --f-line: #2e2a26; --f-line-strong: #3d3732;
    --f-accent: #d9825f; --f-accent-hover: #e4936f; --f-accent-ink: #f0a789; --f-accent-soft: #3a2519; --f-on-accent: #1c1917;
    --f-green: #7fd3a3; --f-green-soft: #15301f; --f-red: #f19a8e; --f-red-soft: #3a1d19;
    --f-amber: #e8b467; --f-amber-soft: #352611; --f-blue: #9bb8f0; --f-blue-soft: #1b2742;
    --f-violet: #c2aef5; --f-violet-soft: #2a2140; --f-gray-soft: #2b2622;
    --f-pink: #f29ac0; --f-pink-soft: #3d1a2a; --f-teal: #6fd6c9; --f-teal-soft: #11302d; --f-indigo: #aeb2fb; --f-indigo-soft: #1f2148;
    --f-orange: #f5b27a; --f-orange-soft: #3a2413; --f-lime: #b5dc6f; --f-lime-soft: #23300f; --f-slate: #b6c2d2; --f-slate-soft: #242a33;
    --f-overlay: rgba(0, 0, 0, .6);
    --f-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --f-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --f-shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
    --f-focus: 0 0 0 3px rgba(217, 130, 95, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --f-bg: #141210; --f-surface: #1c1917; --f-surface-2: #221e1b; --f-surface-3: #2b2622;
  --f-sidebar: #181513; --f-sidebar-hover: #221e1b; --f-sidebar-active: #2b2622;
  --f-ink: #f5f2ee; --f-ink-2: #d6d3d1; --f-muted: #a8a29e; --f-line: #2e2a26; --f-line-strong: #3d3732;
  --f-accent: #d9825f; --f-accent-hover: #e4936f; --f-accent-ink: #f0a789; --f-accent-soft: #3a2519; --f-on-accent: #1c1917;
  --f-green: #7fd3a3; --f-green-soft: #15301f; --f-red: #f19a8e; --f-red-soft: #3a1d19;
  --f-amber: #e8b467; --f-amber-soft: #352611; --f-blue: #9bb8f0; --f-blue-soft: #1b2742;
  --f-violet: #c2aef5; --f-violet-soft: #2a2140; --f-gray-soft: #2b2622;
    --f-pink: #f29ac0; --f-pink-soft: #3d1a2a; --f-teal: #6fd6c9; --f-teal-soft: #11302d; --f-indigo: #aeb2fb; --f-indigo-soft: #1f2148;
    --f-orange: #f5b27a; --f-orange-soft: #3a2413; --f-lime: #b5dc6f; --f-lime-soft: #23300f; --f-slate: #b6c2d2; --f-slate-soft: #242a33;
  --f-overlay: rgba(0, 0, 0, .6);
  --f-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --f-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --f-shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
  --f-focus: 0 0 0 3px rgba(217, 130, 95, .35);
}

/* Browser surfaces the app didn't draw */
::selection { background: var(--f-accent-soft); color: var(--f-ink); }
:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
* { scrollbar-color: var(--f-line-strong) transparent; }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--f-accent); }

/* Icons from focus-ui/icons.svg: <svg class="f-icon"><use href="focus-ui/icons.svg#i-name"/></svg> */
.f-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* Brand lockup: FOCUS MARKETING logo · divider · app icon (the app icon is also the favicon) */
.f-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.f-lockup .f-brand { height: 40px; width: auto; display: block; }
.f-lockup .f-sep { width: 1px; align-self: stretch; margin: 2px 0; background: var(--f-line-strong); }
.f-lockup .f-apptile { width: 36px; height: 36px; border-radius: 9px; display: block; box-shadow: var(--f-shadow-sm); }

/* Theme-specific assets: <img class="f-only-light"> + <img class="f-only-dark"> */
.f-only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .f-only-dark { display: block !important; }
  :root:not([data-theme="light"]) .f-only-light { display: none !important; }
}
:root[data-theme="dark"] .f-only-dark { display: block !important; }
:root[data-theme="dark"] .f-only-light { display: none !important; }

/* Theme switch (rendered by theme.js) */
.f-theme { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--f-surface-2); border: 1px solid var(--f-line); }
.f-theme button { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--f-muted); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.f-theme button:hover { color: var(--f-ink); background: transparent; }
.f-theme button[aria-pressed="true"] { background: var(--f-surface); color: var(--f-ink); box-shadow: var(--f-shadow-sm); }
.f-theme .f-icon { width: 14px; height: 14px; vertical-align: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }