/* ──────────────────────────────────────────
   Fingerblip — Design Tokens
   Colors & Typography · LIGHT THEME
   ────────────────────────────────────────── */

:root {
  /* ── Core palette ────────────────────────
     Paper/cream canvas, dark-green ink.
     The same forest metaphor, flipped — ink is
     drawn in the canopy; paper is the clearing.
     ──────────────────────────────────────── */
  --fb-abyss:     #071b17;  /* ink — darkest text, QR */
  --fb-deep:      #0d3d32;  /* body ink */
  --fb-canopy:    #1a5c4e;  /* subdued dark green */
  --fb-muted:     #5a8a78;  /* secondary text, labels */
  --fb-cream:     #aed4c4;  /* pale green (hairline, subtle tints) */
  --fb-paper:     #f3efe7;  /* page canvas */
  --fb-paper-alt: #ecf1ea;  /* inset / nested tinted surface */
  --fb-surface:   #ffffff;  /* card surface */

  /* Accent — single warm orange (unchanged) */
  --fb-signal:    #c97b12;  /* primary CTA, accent lines */
  --fb-signal-lt: #e8952a;  /* hover/active state of signal */

  /* Semantic */
  --fb-danger:    #b8411e;  /* tuned for paper — richer, readable */
  --fb-success:   #2f7a53;

  /* ── Foreground aliases ──────────────────
     fg1 = highest emphasis (dark); fg4 = least.
     ──────────────────────────────────────── */
  --fb-fg1: var(--fb-abyss);   /* headings, values */
  --fb-fg2: var(--fb-deep);    /* body, links */
  --fb-fg3: var(--fb-muted);   /* labels, eyebrows, helper */
  --fb-fg4: rgba(13,61,50,0.45); /* disabled, placeholders */

  --fb-bg1: var(--fb-paper);    /* page */
  --fb-bg2: var(--fb-surface);  /* card */
  --fb-bg3: var(--fb-paper-alt); /* nested / inset */

  /* Borders */
  --fb-border:        rgba(13,61,50,0.18);
  --fb-border-strong: rgba(13,61,50,0.30);
  --fb-border-faint:  rgba(13,61,50,0.10);

  /* Tinted fills used for warnings / locked states */
  --fb-signal-fill:   rgba(201,123,18,0.10);
  --fb-signal-border: rgba(201,123,18,0.40);
  --fb-signal-faint:  rgba(201,123,18,0.05);
  --fb-signal-soft:   rgba(201,123,18,0.18);

  --fb-success-fill:  rgba(47,122,83,0.10);
  --fb-success-border:rgba(47,122,83,0.35);

  --fb-danger-fill:   rgba(184,65,30,0.09);
  --fb-danger-border: rgba(184,65,30,0.35);

  /* Divider inside nested surfaces */
  --fb-divider: rgba(13,61,50,0.14);

  /* Step indicator — unreached dot (deep ink @ 25%, not gray / not canopy) */
  --fb-step-dot-default: rgba(13, 61, 50, 0.25);

  /* ── Typography families ─────────────────
     Unchanged — system sans + mono.
     ──────────────────────────────────────── */
  --fb-font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fb-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* ── Type scale ──────────────────────────
     Same scale; unchanged from dark theme.
     ──────────────────────────────────────── */
  --fb-display-size:   clamp(2.4rem, 5vw, 3.6rem);
  --fb-display-weight: 300;
  --fb-display-track:  0.10em;
  --fb-display-leading: 1.2;

  --fb-h2-size:   1.05rem;
  --fb-h2-track:  0.14em;
  --fb-h3-size:   0.78rem;
  --fb-h3-track:  0.14em;

  --fb-body-size: 15px;
  --fb-body-leading: 1.6;

  --fb-eyebrow-size:  0.70rem;
  --fb-eyebrow-track: 0.18em;
  --fb-label-size:    0.68rem;
  --fb-label-track:   0.16em;

  --fb-button-size:  0.82rem;
  --fb-button-track: 0.10em;

  --fb-mono-size: 0.95rem;

  /* ── Radii ───────────────────────────────── */
  --fb-radius-card:  12px;
  --fb-radius-input: 8px;
  --fb-radius-pill:  3px;

  /* ── Spacing ─────────────────────────────── */
  --fb-space-1:  4px;
  --fb-space-2:  8px;
  --fb-space-3:  12px;
  --fb-space-4:  16px;
  --fb-space-5:  22px;
  --fb-space-6:  28px;
  --fb-space-7:  36px;
  --fb-space-8:  48px;
  --fb-space-9:  80px;

  /* ── Elevation ─────────────────────────────
     Soft drop shadow — cards on paper need subtle
     lift to separate from the canvas.
     ──────────────────────────────────────── */
  --fb-shadow-card:  0 1px 2px rgba(13,61,50,0.06), 0 8px 24px rgba(13,61,50,0.08);
  --fb-shadow-modal: 0 24px 48px rgba(13,61,50,0.18);

  /* ── Motion ──────────────────────────────── */
  --fb-ease:       cubic-bezier(.4, 0, .2, 1);
  --fb-dur-fast:   150ms;
  --fb-dur-base:   200ms;
  --fb-dur-slow:   300ms;
  --fb-transition: opacity 200ms ease, background 200ms ease,
                   color 200ms ease, border-color 200ms ease;
}

/* ──────────────────────────────────────────
   Semantic element styles
   ────────────────────────────────────────── */
body {
  background-color: var(--fb-bg1);
  color: var(--fb-fg2);
  font-family: var(--fb-font-sans);
  font-size: var(--fb-body-size);
  line-height: var(--fb-body-leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, .fb-display {
  font-family: var(--fb-font-sans);
  font-size: var(--fb-display-size);
  font-weight: var(--fb-display-weight);
  letter-spacing: var(--fb-display-track);
  line-height: var(--fb-display-leading);
  color: var(--fb-fg1);
}

h2, .fb-h2 {
  font-size: var(--fb-h2-size);
  font-weight: 300;
  letter-spacing: var(--fb-h2-track);
  text-transform: uppercase;
  color: var(--fb-fg1);
}

h3, .fb-h3 {
  font-size: var(--fb-h3-size);
  font-weight: 300;
  letter-spacing: var(--fb-h3-track);
  text-transform: uppercase;
  color: var(--fb-fg3);
}

.fb-eyebrow {
  font-size: var(--fb-eyebrow-size);
  letter-spacing: var(--fb-eyebrow-track);
  text-transform: uppercase;
  color: var(--fb-signal);
}

.fb-label {
  font-size: var(--fb-label-size);
  letter-spacing: var(--fb-label-track);
  text-transform: uppercase;
  color: var(--fb-fg3);
}

.fb-mono, code, kbd, samp {
  font-family: var(--fb-font-mono);
  font-size: var(--fb-mono-size);
  letter-spacing: 0.03em;
  color: var(--fb-fg1);
}

p { color: var(--fb-fg2); }

a {
  color: var(--fb-fg2);
  text-decoration: none;
  transition: var(--fb-transition);
}
a:hover { color: var(--fb-fg1); }