/* =============================================================
   Trifecta Host — Design Tokens
   Colors + Type. Pulled from the production app.css (DaisyUI v5
   custom "trifecta" theme). Use these vars in any HTML artifact
   to stay on-brand. Light theme only — the app supports 33
   DaisyUI themes but "trifecta" is the canonical default.
   ============================================================= */

/* ---------- Web fonts (LOCAL) ----------
   All brand fonts ship locally in fonts/, sourced from
   @fontsource-variable/{inter,space-grotesk}. Subsets are split by
   unicode-range so unused scripts never download. Mono falls back to
   the OS monospace stack (no JetBrains Mono file shipped). */

/* ----- Inter (variable, 100–900) ----- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ----- Space Grotesk (variable, 300–700) ----- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* ===========================================================
     COLORS — base layer (warm cream tones)
     Values are OKLCH in source, with sRGB fallbacks for quick
     copy/paste into tools that don't speak oklch.
     =========================================================== */

  /* Base / surface */
  --tf-base-100:        oklch(98.5% 0.008 70);   /* #fbf8f3 — warm cream, primary background */
  --tf-base-200:        oklch(96%   0.012 70);   /* #f4f0e8 — slightly deeper cream, sub-surface */
  --tf-base-300:        oklch(90%   0.02  70);   /* #e3dccd — warm gray, borders + dividers */
  --tf-base-content:    oklch(22%   0.025 260);  /* #1f2533 — dark blue-black, primary text */
  --tf-base-content-60: oklch(22% 0.025 260 / 0.70); /* muted/secondary text — WCAG AA compliant */
  --tf-base-content-40: oklch(22% 0.025 260 / 0.55); /* tertiary text — WCAG AA compliant */
  --tf-base-content-30: oklch(22% 0.025 260 / 0.50); /* hint text — WCAG AA compliant (large text only) */

  /* Brand orange — the only chromatic accent */
  --tf-primary:         oklch(68% 0.19 45);      /* ≈ hsl(24 100% 56%) / #ff7733 */
  --tf-primary-content: oklch(100% 0 0);         /* white on orange */
  --tf-primary-50:      oklch(68% 0.19 45 / 0.50);
  --tf-primary-20:      oklch(68% 0.19 45 / 0.20);
  --tf-primary-10:      oklch(68% 0.19 45 / 0.10);
  --tf-primary-05:      oklch(68% 0.19 45 / 0.05);
  --tf-primary-deep:    hsl(22 100% 50%);        /* used in logo strokes/fills */

  /* Secondary / accent — warm creams, low chroma */
  --tf-secondary:         oklch(93% 0.02 70);
  --tf-secondary-content: oklch(28% 0.03 260);
  --tf-accent:            oklch(91% 0.03 75);
  --tf-accent-content:    oklch(22% 0.025 260);

  /* Neutral (dark surface used sparingly — footers, dark badges) */
  --tf-neutral:         oklch(22% 0.025 260);
  --tf-neutral-content: oklch(98% 0.005 70);

  /* Semantic */
  --tf-info:            oklch(70% 0.12 240);     /* clear blue */
  --tf-info-content:    oklch(98% 0 0);
  --tf-success:         oklch(72% 0.17 145);     /* clear green */
  --tf-success-content: oklch(98% 0 0);
  --tf-warning:         oklch(82% 0.16 70);      /* warm amber */
  --tf-warning-content: oklch(25% 0.03 70);
  --tf-error:           oklch(62% 0.2  25);      /* clear red */
  --tf-error-content:   oklch(100% 0 0);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */

  /* Stacks */
  --tf-font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif,
                     "Apple Color Emoji", "Segoe UI Emoji",
                     "Segoe UI Symbol", "Noto Color Emoji";
  --tf-font-display: "Space Grotesk", "Inter", sans-serif;
  --tf-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas,
                     "Liberation Mono", monospace;

  /* Type scale (Tailwind-aligned) */
  --tf-text-xs:   0.75rem;    /* 12 */
  --tf-text-sm:   0.875rem;   /* 14 */
  --tf-text-base: 1rem;       /* 16 */
  --tf-text-lg:   1.125rem;   /* 18 */
  --tf-text-xl:   1.25rem;    /* 20 */
  --tf-text-2xl:  1.5rem;     /* 24 */
  --tf-text-3xl:  1.875rem;   /* 30 */
  --tf-text-4xl:  2.25rem;    /* 36 */
  --tf-text-5xl:  3rem;       /* 48 — marketing only */
  --tf-text-6xl:  3.75rem;    /* 60 — marketing only */

  /* Weights */
  --tf-weight-regular:  400;
  --tf-weight-medium:   500;
  --tf-weight-semibold: 600;
  --tf-weight-bold:     700;
  --tf-weight-extra:    800;

  /* Tracking */
  --tf-tracking-tight:  -0.025em; /* used on all h1–h6 */
  --tf-tracking-normal: 0;
  --tf-tracking-wide:   0.04em;   /* uppercase SectionLabel */

  /* Line-heights */
  --tf-leading-tight:  1.15;
  --tf-leading-snug:   1.3;
  --tf-leading-normal: 1.5;

  /* ===========================================================
     SHAPE — radii, borders, shadows
     =========================================================== */
  --tf-radius-selector: 0.75rem;  /* toggles, switches */
  --tf-radius-field:    0.5rem;   /* inputs, textareas */
  --tf-radius-box:      0.75rem;  /* cards, modals */
  --tf-radius-full:     9999px;
  --tf-border:          1px;

  /* Shadows — sparing. App uses shadow-sm on default cards. */
  --tf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --tf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* ===========================================================
     SPACING — 4px-grid, Tailwind-aligned
     =========================================================== */
  --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-8: 2rem;      /* 32 */
  --tf-space-10: 2.5rem;   /* 40 */
  --tf-space-12: 3rem;     /* 48 */
  --tf-space-16: 4rem;     /* 64 */
}

/* =============================================================
   BASE TYPE — apply to <body> for the canonical Trifecta look
   ============================================================= */
body {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-text-base);
  line-height: var(--tf-leading-normal);
  color: var(--tf-base-content);
  background: var(--tf-base-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-weight-semibold);
  letter-spacing: var(--tf-tracking-tight);
  line-height: var(--tf-leading-tight);
  color: var(--tf-base-content);
}

/* Display + page-header sizes — match observed app + marketing usage */
h1, .tf-h1 { font-size: var(--tf-text-4xl); }   /* hero, page title */
h2, .tf-h2 { font-size: var(--tf-text-3xl); }   /* section */
h3, .tf-h3 { font-size: var(--tf-text-2xl); }   /* sub-section */
h4, .tf-h4 { font-size: var(--tf-text-xl);  font-weight: var(--tf-weight-semibold); }
h5, .tf-h5 { font-size: var(--tf-text-lg);  font-weight: var(--tf-weight-semibold); }
h6, .tf-h6 { font-size: var(--tf-text-base);font-weight: var(--tf-weight-semibold); }

p, .tf-p { font-size: var(--tf-text-base); line-height: var(--tf-leading-normal); }

small, .tf-small {
  font-size: var(--tf-text-sm);
  color: var(--tf-base-content-60);
}

code, kbd, samp, pre, .tf-code {
  font-family: var(--tf-font-mono);
  font-size: 0.9em;
}

/* SectionLabel — the canonical "tiny uppercase header" used everywhere */
.tf-section-label {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-wide);
  text-transform: uppercase;
  color: var(--tf-base-content-60);
}

/* Muted helper text (`text-base-content/60` in Tailwind) */
.tf-muted   { color: var(--tf-base-content-60); }
.tf-subtle  { color: var(--tf-base-content-40); }
.tf-hint    { color: var(--tf-base-content-30); }

/* =============================================================
   PRIMITIVE UTILITY CLASSES — for HTML artifacts that don't
   want to pull in Tailwind/DaisyUI but still want on-brand look
   ============================================================= */

.tf-card {
  background: var(--tf-base-100);
  border: 1px solid var(--tf-base-300);
  border-radius: var(--tf-radius-box);
  box-shadow: var(--tf-shadow-sm);
}

.tf-card-muted {
  background: color-mix(in oklch, var(--tf-base-200) 50%, transparent);
  border: 1px solid var(--tf-base-300);
  border-radius: var(--tf-radius-box);
}

.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-2);
  height: 2.5rem;
  padding: 0 var(--tf-space-4);
  border-radius: var(--tf-radius-field);
  border: 1px solid transparent;
  font-family: var(--tf-font-sans);
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 150ms, opacity 150ms, transform 80ms;
}
.tf-btn:active   { transform: scale(0.98); }
.tf-btn-primary  { background: var(--tf-primary); color: var(--tf-primary-content); }
.tf-btn-primary:hover { background: oklch(64% 0.2 45); }
.tf-btn-ghost    { background: transparent; color: var(--tf-base-content); }
.tf-btn-ghost:hover { background: var(--tf-base-200); }
.tf-btn-outline  { background: transparent; border-color: var(--tf-base-300); color: var(--tf-base-content); }
.tf-btn-outline:hover { background: var(--tf-base-200); }

.tf-input {
  height: 2.5rem;
  padding: 0 var(--tf-space-3);
  background: var(--tf-base-100);
  border: 1px solid var(--tf-base-300);
  border-radius: var(--tf-radius-field);
  font: inherit;
  color: var(--tf-base-content);
  transition: border-color 150ms, box-shadow 150ms;
}
.tf-input:focus {
  outline: none;
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 3px var(--tf-primary-20);
}

.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: var(--tf-radius-full);
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-medium);
  background: var(--tf-base-200);
  color: var(--tf-base-content);
  border: 1px solid var(--tf-base-300);
}
.tf-badge-primary { background: var(--tf-primary); color: var(--tf-primary-content); border-color: transparent; }
.tf-badge-success { background: var(--tf-success); color: var(--tf-success-content); border-color: transparent; }
.tf-badge-warning { background: var(--tf-warning); color: var(--tf-warning-content); border-color: transparent; }
.tf-badge-error   { background: var(--tf-error);   color: var(--tf-error-content);   border-color: transparent; }
.tf-badge-info    { background: var(--tf-info);    color: var(--tf-info-content);    border-color: transparent; }