/* ============================================================
   TALLY — Design Tokens (warm)
   Functional AND pleasant. Reference the variables; don't hardcode.
   Fonts: load DM Mono + Inter in the app shell.
   ============================================================ */

:root {
  /* --- Brand core --- */
  --bf-ink:    #1F2024;
  --bf-paper:  #F6F1E9;
  --bf-coral:  #E0644B;   /* warmer, slightly softer coral */
  --bf-teal:   #1E9384;   /* fresh teal */

  /* --- Supporting warm tones (used as soft tints, not loud fills) --- */
  --bf-rose:   #D98A7A;   /* dusty rose */
  --bf-sand:   #E9C88C;   /* warm sand / soft gold */
  --bf-sage:   #8FB39B;   /* soft sage */

  /* --- Light theme (primary) ---
     Surface values spread apart so a white card actually lifts off the ground.
     bg pulled down ~3pt from the original #F6F1E9; sunk is now a real step below it. */
  --bf-bg:            #F3EDE1;  /* warm app background */
  --bf-surface:       #FFFEFB;  /* cards — warm white, not stark */
  --bf-surface-alt:   #F8F2E7;  /* alternate surface / hover */
  --bf-surface-sunk:  #EBE1D1;  /* table header, wells */
  --bf-text:          #26262B;  /* softened near-black */
  --bf-text-muted:    #6E685E;
  --bf-border:        #EADFCF;  /* warm hairline */
  --bf-accent:        #E0644B;  /* coral */
  --bf-accent-2:      #1E9384;  /* teal */
  --bf-focus:         #E0644B;

  /* --- Soft accent tints (backgrounds for cards, pills, sections) --- */
  --bf-coral-tint: #FBE7E0;
  --bf-teal-tint:  #DFF0EC;
  --bf-rose-tint:  #F7E6E0;
  --bf-sand-tint:  #FBEFD6;
  --bf-sage-tint:  #E3EFE7;

  /* --- Status (functional, on-brand) --- */
  --bf-success:      #1E9384;  --bf-success-tint: #DFF0EC;
  --bf-warning:      #C98A2B;  --bf-warning-tint: #FBEFD6;
  --bf-danger:       #CE4C36;  --bf-danger-tint:  #FBE1DB;
  --bf-info:         #4E7C8A;  --bf-info-tint:    #E3EEF1;

  /* --- Typography --- */
  --bf-font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --bf-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --bf-fs-display: 28px; --bf-fs-h2: 19px; --bf-fs-h3: 15px;
  --bf-fs-label: 11px;   --bf-fs-body: 14px; --bf-fs-small: 12px;
  --bf-track-label: 0.13em;

  /* --- Spacing (4px base) --- */
  --bf-1:4px; --bf-2:8px; --bf-3:12px; --bf-4:16px;
  --bf-5:24px; --bf-6:32px; --bf-7:48px; --bf-8:64px;

  /* --- Radius --- */
  --bf-radius:    12px;
  --bf-radius-sm: 8px;
  --bf-radius-lg: 18px;
  --bf-radius-pill: 999px;

  /* --- Material depth -------------------------------------------------
     One light source, from directly above. Five elevation steps, each a
     tight contact shadow + a soft ambient one, tinted warm (toward brown,
     not the cool grey they used to be). --bf-lift is the 1px highlight on a
     surface's top edge — the single most effective "not flat" cue for a
     paper UI. --bf-inset makes an input look like something you write into.
     Values calibrated against the preview: "strong" + 2.5% grain. */
  --bf-elev-1: 0 1px 2px rgba(61,50,38,.07), 0 4px 12px rgba(61,50,38,.09);
  --bf-elev-2: 0 3px 7px rgba(61,50,38,.10), 0 12px 28px rgba(61,50,38,.13);
  --bf-elev-3: 0 6px 14px rgba(61,50,38,.13), 0 22px 50px rgba(61,50,38,.18);
  --bf-elev-4: 0 16px 34px rgba(61,50,38,.17), 0 42px 88px rgba(61,50,38,.26);
  --bf-elev-5: 0 22px 44px rgba(61,50,38,.22), 0 54px 104px rgba(61,50,38,.34);
  --bf-lift:   inset 0 1px 0 rgba(255,255,255,.65);
  --bf-inset:  inset 0 1px 4px rgba(61,50,38,.14);
  /* A white sheen that layers over any surface colour (white card or soft
     tint) so the fill has gentle roundness instead of a dead-flat wash. */
  --bf-sheen:  linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);

  /* Legacy names kept; re-pointed at the ladder so everything using them
     inherits the pass. */
  --bf-shadow:      var(--bf-elev-1);
  --bf-shadow-soft: var(--bf-elev-2);

  /* Paper grain — a dark-brown fractal-noise speckle, ~2.5% at its darkest,
     tiled on the body background under all content. Off under
     prefers-reduced-transparency and via html.no-grain (a profile toggle). */
  --bf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.23 0 0 0 0 0.19 0 0 0 0 0.14 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- Motion ---------------------------------------------------------
     Three speeds, two curves. Rule of thumb: fast + ease-out for anything
     the user just did (hover, press, a panel they opened); slower +
     ease-in-out for anything arriving on its own (a toast, a live update).
     ease-back is the gentle overshoot — sparingly, for entrances. */
  --bf-dur-fast:    120ms;
  --bf-dur-base:    200ms;
  --bf-dur-slow:    320ms;
  --bf-ease-out:    cubic-bezier(.22, 1, .36, 1);
  --bf-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --bf-ease-back:   cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] {
  --bf-bg:#1B1C21; --bf-surface:#262932; --bf-surface-alt:#2E313B; --bf-surface-sunk:#141519;
  --bf-text:#F4EFE6; --bf-text-muted:#A49E92; --bf-border:#33353F;
  --bf-accent:#EC7358; --bf-accent-2:#39B5A2; --bf-focus:#EC7358;
  --bf-coral-tint:#3A2620; --bf-teal-tint:#16302C; --bf-rose-tint:#382723;
  --bf-sand-tint:#332B1B; --bf-sage-tint:#233029;
  --bf-success:#39B5A2; --bf-success-tint:#16302C;
  --bf-warning:#D6A24B; --bf-warning-tint:#332B1B;
  --bf-danger:#E0654E;  --bf-danger-tint:#3A2620;

  /* Depth on dark reads through lighter surfaces + an inner top glow more
     than through drop shadow; the shadows still carry the ambient.
     "strong" set, matching the light theme's calibration. */
  --bf-elev-1: 0 1px 3px rgba(0,0,0,.38), 0 4px 14px rgba(0,0,0,.40);
  --bf-elev-2: 0 3px 9px rgba(0,0,0,.44), 0 14px 32px rgba(0,0,0,.48);
  --bf-elev-3: 0 8px 18px rgba(0,0,0,.50), 0 26px 56px rgba(0,0,0,.58);
  --bf-elev-4: 0 18px 38px rgba(0,0,0,.56), 0 44px 92px rgba(0,0,0,.66);
  --bf-elev-5: 0 26px 50px rgba(0,0,0,.62), 0 60px 110px rgba(0,0,0,.72);
  --bf-lift:   inset 0 1px 0 rgba(255,255,255,.05);
  --bf-inset:  inset 0 1px 4px rgba(0,0,0,.44);
  --bf-sheen:  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 58%);
  /* pale, cooler speckle for dark */
  --bf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 0 0.68 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Grain kill-switches */
@media (prefers-reduced-transparency: reduce) { :root { --bf-grain: none; } }
html.no-grain { --bf-grain: none; }

/* ============================================================
   BASE
   ============================================================ */
body{ background:var(--bf-bg); color:var(--bf-text);
  font-family:var(--bf-font-body); font-size:var(--bf-fs-body); line-height:1.55; }

h1,h2,h3,.bf-title,.bf-label{ font-family:var(--bf-font-mono); }
h1,.bf-title{ font-size:var(--bf-fs-display); font-weight:500; letter-spacing:-.3px; }
h2{ font-size:var(--bf-fs-h2); font-weight:500; }
h3{ font-size:var(--bf-fs-h3); font-weight:500; }

.bf-label{ font-size:var(--bf-fs-label); letter-spacing:var(--bf-track-label);
  text-transform:uppercase; color:var(--bf-accent); font-weight:700; }
.bf-num{ font-family:var(--bf-font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Buttons — friendly, rounded */
.bf-btn{ font-family:var(--bf-font-mono); font-size:13px; padding:10px 18px;
  border-radius:var(--bf-radius-pill); border:1px solid transparent; cursor:pointer; line-height:1; }
.bf-btn--primary{ background:var(--bf-accent); color:#fff; }
.bf-btn--primary:hover{ filter:brightness(.95); }
.bf-btn--secondary{ background:var(--bf-surface); color:var(--bf-text); border-color:var(--bf-border); }
.bf-btn--secondary:hover{ background:var(--bf-surface-alt); }
.bf-btn--ghost{ background:transparent; color:var(--bf-text-muted); }

/* Inputs — soft */
.bf-input{ font-family:var(--bf-font-body); font-size:var(--bf-fs-body);
  background:var(--bf-surface); color:var(--bf-text);
  border:1px solid var(--bf-border); border-radius:var(--bf-radius-sm); padding:10px 12px; }
.bf-input:focus{ outline:2px solid var(--bf-focus); outline-offset:1px; border-color:transparent; }

/* Cards — warm white, soft shadow, roomy */
.bf-card{ background:var(--bf-surface); border:1px solid var(--bf-border);
  border-radius:var(--bf-radius); padding:var(--bf-5); box-shadow:var(--bf-shadow); }
/* Tinted feature cards — welcoming, use the soft tints */
.bf-card--coral{ background:var(--bf-coral-tint); border-color:transparent; }
.bf-card--teal{  background:var(--bf-teal-tint);  border-color:transparent; }
.bf-card--sand{  background:var(--bf-sand-tint);  border-color:transparent; }
.bf-card--sage{  background:var(--bf-sage-tint);  border-color:transparent; }
.bf-card--rose{  background:var(--bf-rose-tint);  border-color:transparent; }

/* Status pills — soft tint + readable text */
.bf-pill{ font-family:var(--bf-font-mono); font-size:11px; letter-spacing:.03em;
  padding:4px 11px; border-radius:var(--bf-radius-pill); display:inline-block; }
.bf-pill--ok{    background:var(--bf-success-tint); color:var(--bf-success); }
.bf-pill--warn{  background:var(--bf-warning-tint); color:var(--bf-warning); }
.bf-pill--alert{ background:var(--bf-danger-tint);  color:var(--bf-danger); }
.bf-pill--info{  background:var(--bf-info-tint);    color:var(--bf-info); }

/* Signature motif: the teal square — friendly marker, can also be coral/sand for variety */
.bf-sq{ display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--bf-accent-2); }
.bf-marker{ position:relative; padding-left:18px; }
.bf-marker::before{ content:""; position:absolute; left:0; top:.42em;
  width:9px; height:9px; border-radius:2px; background:var(--bf-accent-2); }

/* Rounded avatar/icon chip — for people, containers, categories */
.bf-chip{ width:36px; height:36px; border-radius:var(--bf-radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--bf-font-mono); font-size:14px; }

/* Table — clean data (clarity first), warm frame */
.bf-table{ width:100%; border-collapse:collapse; }
.bf-table th{ font-family:var(--bf-font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bf-text-muted); text-align:left;
  background:var(--bf-surface-sunk); padding:9px 14px; }
.bf-table th:first-child{ border-top-left-radius:var(--bf-radius-sm); }
.bf-table th:last-child{ border-top-right-radius:var(--bf-radius-sm); }
.bf-table td{ padding:11px 14px; border-bottom:1px solid var(--bf-border); }
.bf-table tr:hover td{ background:var(--bf-surface-alt); }
.bf-table td.num{ font-family:var(--bf-font-mono); font-variant-numeric:tabular-nums; text-align:right; }