/*
 * TitleFlash design tokens.
 * Shared between the static landing page and the React app.
 * Loaded via <link> in index.html before any page styles.
 */

:root {
  color-scheme: light;

  /* Palette ----------------------------------------------------------- */
  --tf-canvas: #fbf7ed;
  --tf-canvas-strong: #f5efe1;
  --tf-paper: #fffefa;
  --tf-paper-strong: #ffffff;

  --tf-ink: #161a23;
  --tf-ink-soft: #2b3140;
  --tf-muted: #5b6473;
  --tf-muted-soft: #7d8694;
  --tf-quiet: #9aa0ab;

  --tf-line: #ebe2cf;
  --tf-line-strong: #d8cdb4;
  --tf-line-soft: #f2ead8;

  --tf-teal: #0d6b66;
  --tf-teal-dark: #084a47;
  --tf-teal-soft: #e1efed;
  --tf-teal-tint: #f1f8f7;

  --tf-amber: #c87a08;
  --tf-amber-dark: #8a4d04;
  --tf-amber-soft: #fbe9c7;
  --tf-amber-tint: #fdf4dd;

  --tf-coral: #c14e2c;
  --tf-coral-soft: #fbe2d6;

  --tf-success: #16774b;
  --tf-success-soft: #d8eedf;
  --tf-warning: #b45309;
  --tf-warning-soft: #fde4c5;
  --tf-danger: #a52323;
  --tf-danger-soft: #fbdcdc;

  /* Typography -------------------------------------------------------- */
  --tf-font-display: "Fraunces", "Source Serif 4", "Iowan Old Style",
    "Apple Garamond", Georgia, "Times New Roman", serif;
  --tf-font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale (rem-based, 16px root) */
  --tf-text-2xs: 0.6875rem;   /* 11 */
  --tf-text-xs: 0.75rem;      /* 12 */
  --tf-text-sm: 0.875rem;     /* 14 */
  --tf-text-base: 1rem;       /* 16 */
  --tf-text-md: 1.0625rem;    /* 17 */
  --tf-text-lg: 1.1875rem;    /* 19 */
  --tf-text-xl: 1.375rem;     /* 22 */
  --tf-text-2xl: 1.75rem;     /* 28 */
  --tf-text-3xl: 2.25rem;     /* 36 */
  --tf-text-4xl: 3rem;        /* 48 */
  --tf-text-5xl: 3.75rem;     /* 60 */

  /* Display sizes scale fluidly */
  --tf-display-sm: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --tf-display-md: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --tf-display-lg: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);

  /* Spacing scale (4px base) ------------------------------------------ */
  --tf-space-1: 0.25rem;      /* 4 */
  --tf-space-2: 0.5rem;       /* 8 */
  --tf-space-3: 0.75rem;      /* 12 */
  --tf-space-4: 1rem;         /* 16 */
  --tf-space-5: 1.25rem;      /* 20 */
  --tf-space-6: 1.5rem;       /* 24 */
  --tf-space-7: 1.75rem;      /* 28 */
  --tf-space-8: 2rem;          /* 32 */
  --tf-space-10: 2.5rem;       /* 40 */
  --tf-space-12: 3rem;         /* 48 */
  --tf-space-16: 4rem;         /* 64 */
  --tf-space-20: 5rem;         /* 80 */
  --tf-space-24: 6rem;         /* 96 */
  --tf-space-32: 8rem;         /* 128 */

  /* Radii ------------------------------------------------------------- */
  --tf-radius-xs: 4px;
  --tf-radius-sm: 6px;
  --tf-radius-md: 10px;
  --tf-radius-lg: 14px;
  --tf-radius-xl: 20px;
  --tf-radius-2xl: 28px;
  --tf-radius-pill: 999px;

  /* Shadows ----------------------------------------------------------- */
  --tf-shadow-xs: 0 1px 2px rgba(34, 28, 16, 0.06);
  --tf-shadow-sm: 0 4px 12px rgba(34, 28, 16, 0.06);
  --tf-shadow-md: 0 12px 32px rgba(34, 28, 16, 0.08);
  --tf-shadow-lg: 0 28px 64px rgba(34, 28, 16, 0.12);
  --tf-shadow-card: 0 1px 0 rgba(216, 205, 180, 0.6),
    0 12px 32px rgba(34, 28, 16, 0.06);
  --tf-shadow-press: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(34, 28, 16, 0.08);

  /* Focus ring -------------------------------------------------------- */
  --tf-focus-ring: 0 0 0 3px rgba(13, 107, 102, 0.28);
  --tf-focus-ring-amber: 0 0 0 3px rgba(200, 122, 8, 0.28);

  /* Motion ------------------------------------------------------------ */
  --tf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tf-duration-fast: 140ms;
  --tf-duration-base: 220ms;
  --tf-duration-slow: 380ms;

  /* Layout ------------------------------------------------------------ */
  --tf-content-max: 76rem;
  --tf-content-narrow: 52rem;
  --tf-content-prose: 38rem;
  --tf-header-height: 4.25rem;
}

/* Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tf-duration-fast: 0ms;
    --tf-duration-base: 0ms;
    --tf-duration-slow: 0ms;
  }
}