/* ============================================================
   FrankenClip Design System — colors_and_type.css
   Light theme. Built for 65+ small-business owners.
   Big fonts, plain English, AAA contrast.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');

:root {
  /* ---------- COLOR — BRAND ---------- */
  --fc-orange:       #f97316;   /* Primary CTA / Franken-bolt */
  --fc-orange-700:   #c2410c;   /* Pressed state */
  --fc-orange-100:   #ffedd5;   /* Soft tint backgrounds */
  --fc-orange-50:    #fff7ed;   /* Wash backgrounds */

  /* ---------- COLOR — INK (text on light) ---------- */
  /* Lens-yellow tuned: warm grays, NOT cool. */
  --fc-ink:          #0a0a0a;   /* Body text. 19:1 on canvas. */
  --fc-ink-2:        #2a2218;   /* Sub-headings, warm */
  --fc-ink-3:        #5c5142;   /* Ink Soft — labels/metadata, 7.8:1, warm gray */
  --fc-ink-4:        #8a7d68;   /* Tertiary — captions only */

  /* ---------- COLOR — PAPER (warm-white, NOT clinical) ---------- */
  --fc-paper:        #ffffff;   /* Surface — cards/elevated panels */
  --fc-paper-2:      #fffaf5;   /* Canvas — page background, warm */
  --fc-paper-3:      #f7efe2;   /* Hover wash — warm beige */

  /* ---------- COLOR — BORDER ---------- */
  --fc-border:       #e5dfd5;   /* Warm beige hairline */
  --fc-border-2:     #d4ccba;   /* Input borders */
  --fc-border-focus: #0a0a0a;

  /* ---------- COLOR — STATUS (lens-yellow + colorblind safe) ---------- */
  --fc-good:         #1f7a3a;   /* Trust Green — deep + saturated */
  --fc-good-bg:      #e6f4ea;   /* Trust Wash */
  --fc-warn:         #b54708;   /* Warning Amber — warmer than yellow */
  --fc-warn-bg:      #fef3c7;   /* bg only, never text */
  --fc-bad:          #b91c1c;   /* Critical Red */
  --fc-bad-bg:       #fde2e1;
  --fc-info:         #1d4ed8;   /* Links — still 8.6:1, used SPARINGLY (lens-yellowing eats blue) */
  --fc-info-bg:      #dbeafe;

  /* FORBIDDEN: pure tech blue #0066ff family, pastel blues/greens,
     yellow text on white, dark blue on black, purple on dark red. */

  /* ---------- TYPE — FAMILIES ---------- */
  --fc-font:         'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --fc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE — WEIGHT ---------- */
  /* Brief: weights 500 + 700 only. NEVER 300/400. */
  --fc-w-medium:     500;
  --fc-w-bold:       700;

  /* ---------- TYPE — SCALE ---------- *
   *  Hero metrics    40-72   |  hero-1, hero-2
   *  Page titles     28-36   |  h1, h2
   *  Sub-headings    22-26   |  h3
   *  Critical nums   22-28   |  metric
   *  Body            18-20   |  body, body-lg  (NEVER below 16)
   *  Labels / caps   14-16   |  label, caption (sparingly)
   * ----------------------------------------- */
  --fc-size-hero-1:    72px;
  --fc-size-hero-2:    56px;
  --fc-size-hero-3:    44px;
  --fc-size-h1:        36px;
  --fc-size-h2:        28px;
  --fc-size-h3:        22px;
  --fc-size-metric-lg: 28px;
  --fc-size-metric:    22px;
  --fc-size-body-lg:   20px;
  --fc-size-body:      18px;
  --fc-size-label:     16px;
  --fc-size-caption:   14px;

  /* ---------- LINE HEIGHT (>=1.5x for body) ---------- */
  --fc-lh-tight:   1.1;
  --fc-lh-snug:    1.25;
  --fc-lh-normal:  1.5;
  --fc-lh-relaxed: 1.7;

  --fc-track-tight:   -0.02em;
  --fc-track-display: -0.03em;

  /* ---------- SPACING (8pt grid) ---------- */
  --fc-s-1:  4px;
  --fc-s-2:  8px;
  --fc-s-3:  12px;   /* min gap between tap targets */
  --fc-s-4:  16px;
  --fc-s-5:  20px;
  --fc-s-6:  24px;
  --fc-s-7:  32px;
  --fc-s-8:  40px;
  --fc-s-9:  48px;
  --fc-s-10: 64px;
  --fc-s-11: 80px;

  /* ---------- TAP TARGETS (48-60pt) ---------- */
  --fc-tap-min:    48px;
  --fc-tap-comfy:  56px;
  --fc-tap-large:  60px;

  /* ---------- RADII ---------- */
  /* Generous radii — softer for older eyes, friendly */
  --fc-r-1: 6px;
  --fc-r-2: 10px;
  --fc-r-3: 14px;   /* default card */
  --fc-r-4: 20px;   /* hero cards */
  --fc-r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Light, warm shadows — never colored, never huge */
  --fc-shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.04);
  --fc-shadow-2: 0 1px 0 rgba(10,10,10,0.04), 0 4px 12px rgba(10,10,10,0.06);
  --fc-shadow-3: 0 2px 0 rgba(10,10,10,0.04), 0 12px 28px rgba(10,10,10,0.10);
  --fc-shadow-focus: 0 0 0 4px rgba(249, 115, 22, 0.35);

  /* ---------- MOTION ---------- *
   * Slow, calm. Never bouncy. Never flashy.
   * (and respect prefers-reduced-motion below)              */
  --fc-ease:      cubic-bezier(0.2, 0, 0.2, 1);
  --fc-dur-fast:  120ms;
  --fc-dur-base:  180ms;
  --fc-dur-slow:  280ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.fc-hero-1 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-hero-1);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-track-display);
  color: var(--fc-ink);
}
.fc-hero-2 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-hero-2);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-track-display);
  color: var(--fc-ink);
}
.fc-hero-3 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-hero-3);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-track-display);
  color: var(--fc-ink);
}
.fc-h1 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-h1);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-track-tight);
  color: var(--fc-ink);
}
.fc-h2 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-h2);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-track-tight);
  color: var(--fc-ink);
}
.fc-h3 {
  font-family: var(--fc-font);
  font-size: var(--fc-size-h3);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  color: var(--fc-ink);
}
.fc-metric-lg {
  font-family: var(--fc-font);
  font-size: var(--fc-size-metric-lg);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-track-tight);
  color: var(--fc-ink);
}
.fc-metric {
  font-family: var(--fc-font);
  font-size: var(--fc-size-metric);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  color: var(--fc-ink);
}
.fc-body-lg {
  font-family: var(--fc-font);
  font-size: var(--fc-size-body-lg);
  font-weight: var(--fc-w-medium);
  line-height: var(--fc-lh-normal);
  color: var(--fc-ink);
}
.fc-body {
  font-family: var(--fc-font);
  font-size: var(--fc-size-body);
  font-weight: var(--fc-w-medium);
  line-height: var(--fc-lh-normal);
  color: var(--fc-ink);
}
.fc-body-dim {
  font-family: var(--fc-font);
  font-size: var(--fc-size-body);
  font-weight: var(--fc-w-medium);
  line-height: var(--fc-lh-normal);
  color: var(--fc-ink-3);
}
.fc-label {
  font-family: var(--fc-font);
  font-size: var(--fc-size-label);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  color: var(--fc-ink-2);
}
.fc-caption {
  font-family: var(--fc-font);
  font-size: var(--fc-size-caption);
  font-weight: var(--fc-w-medium);
  line-height: var(--fc-lh-snug);
  color: var(--fc-ink-3);
  text-transform: none; /* never SHOUTY CAPS — hard to read at age 65+ */
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fc-dur-fast: 0ms;
    --fc-dur-base: 0ms;
    --fc-dur-slow: 0ms;
  }
}