/* ============================================================
   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) --- */
  --bf-bg:            #F6F1E9;  /* warm app background */
  --bf-surface:       #FFFDF9;  /* cards — warm white, not stark */
  --bf-surface-alt:   #FBF6EE;  /* alternate surface / hover */
  --bf-surface-sunk:  #F0E9DD;  /* 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 / elevation (softer, friendlier) --- */
  --bf-radius:    12px;
  --bf-radius-sm: 8px;
  --bf-radius-lg: 18px;
  --bf-radius-pill: 999px;
  --bf-shadow:      0 1px 2px rgba(31,32,36,.04), 0 4px 16px rgba(31,32,36,.06);
  --bf-shadow-soft: 0 2px 24px rgba(31,32,36,.05);
}

[data-theme="dark"] {
  --bf-bg:#1B1C21; --bf-surface:#24262E; --bf-surface-alt:#2A2C35; --bf-surface-sunk:#17181C;
  --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;
}

/* ============================================================
   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; }