/* ============================================================
   Takotasks — Colors & Type
   Tokens sourced from the Takotasks Mini Brand Book (Aug 2024)
   and the website DESIGN.md extension. Hex values are canonical.
   ============================================================ */

/* ------------- FONTS ----------------------------------------- */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Variable.ttf") format("truetype-variations"),
       url("fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Variable.ttf") format("truetype-variations"),
       url("fonts/WorkSans-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Italic-Variable.ttf") format("truetype-variations"),
       url("fonts/WorkSans-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ------------- DESIGN TOKENS --------------------------------- */
:root {
  /* ===== COLORS ============================================== */

  /* Brand & accent — from the Mini Brand Book main palette */
  --tt-primary:           #C41E4A;  /* Magenta — Pantone 7636 C */
  --tt-primary-active:    #A6193E;  /* derived ~15% darker */
  --tt-primary-disabled:  #E8C3CD;  /* magenta tinted toward canvas */
  --tt-accent-sky:        #87C4FF;  /* Sky Blue — Pantone 278 C */

  /* Gradient palette — accent only, solo use < 5% */
  --tt-grad-orange:       #DA4331;  /* Pantone 7597 C */
  --tt-grad-crimson:      #73092F;  /* Pantone 1955 C */
  --tt-grad-pink:         #ED468A;  /* Pantone 212 C */
  --tt-grad-aqua:         #1CE0BB;  /* Pantone 3255 C */
  --tt-grad-lima:         #7FC970;  /* Pantone 7487 C */
  --tt-grad-pine:         #0E796A;  /* Pantone 3295 C */

  /* Signature gradients (with noise — apply via overlay) */
  --tt-gradient-main: linear-gradient(
      125deg,
      #DA4331 0%,
      #C41E4A 38%,
      #73092F 62%,
      #ED468A 100%
  );
  --tt-gradient-secondary: linear-gradient(
      125deg,
      #1CE0BB 0%,
      #7FC970 50%,
      #0E796A 100%
  );

  /* Surfaces */
  --tt-canvas:                #FBFAFA;  /* page floor — warm near-white */
  --tt-surface-soft:          #F4F4F4;  /* very-soft band */
  --tt-surface-card:          #EFEFEF;  /* brand "Light" — feature cards */
  --tt-surface-sky-soft:      #EAF4FF;  /* faint sky tint */
  --tt-surface-dark:          #0D0F16;  /* brand "Dark" — never #000 */
  --tt-surface-dark-elevated: #16181F;  /* dark band cards */
  --tt-hairline:              #E4E4E4;  /* 1px borders on light */
  --tt-hairline-soft:         #ECECEC;  /* same-band divider */

  /* Text */
  --tt-ink:           #0D0F16;  /* headlines / primary on light */
  --tt-body:          #3A3B40;  /* running text on light */
  --tt-muted:         #6B6C70;  /* captions, sub-labels */
  --tt-muted-soft:    #95969A;  /* fine print, copyright */
  --tt-on-primary:    #EFEFEF;  /* on magenta — Light, NOT white */
  --tt-on-dark:       #EFEFEF;  /* on dark band */
  --tt-on-dark-soft:  #A8A9AD;  /* secondary on dark */

  /* Semantic (derived from gradient palette) */
  --tt-success: #7FC970;  /* Lima */
  --tt-info:    #87C4FF;  /* Sky */
  --tt-warning: #DA4331;  /* Orange */
  --tt-error:   #C41E4A;  /* Magenta */

  /* ===== TYPE FAMILIES ====================================== */
  --tt-font-display: "Fredoka", "Baloo 2", "Quicksand", -apple-system,
                     BlinkMacSystemFont, sans-serif;
  --tt-font-body:    "Work Sans", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, sans-serif;
  --tt-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                     Menlo, monospace;

  /* ===== SPACING (base 4px) ================================ */
  --tt-space-xxs:    4px;
  --tt-space-xs:     8px;
  --tt-space-sm:    12px;
  --tt-space-md:    16px;
  --tt-space-lg:    24px;
  --tt-space-xl:    32px;
  --tt-space-xxl:   48px;
  --tt-space-section: 96px;

  /* ===== RADII ============================================== */
  --tt-radius-xs:   6px;
  --tt-radius-sm:   8px;
  --tt-radius-md:  10px;  /* buttons, inputs */
  --tt-radius-lg:  16px;  /* cards */
  --tt-radius-xl:  24px;  /* hero artifact, feature bands */
  --tt-radius-pill: 9999px;
  --tt-radius-full: 50%;

  /* ===== ELEVATION ========================================== */
  --tt-shadow-none: none;
  --tt-shadow-lift: 0 2px 8px rgba(13, 15, 22, 0.06);

  /* ===== SEMANTIC TYPE TOKENS =============================== */
  /* desktop sizes; scale down ~70-80% at mobile */
  --tt-display-xl:  64px;
  --tt-display-lg:  48px;
  --tt-display-md:  36px;
  --tt-display-sm:  28px;
  --tt-title-lg:    22px;
  --tt-title-md:    18px;
  --tt-title-sm:    16px;
  --tt-body-lg:     18px;
  --tt-body-md:     16px;
  --tt-body-sm:     14px;
  --tt-eyebrow:     13px;
  --tt-caption:     13px;
  --tt-button:      15px;
  --tt-nav-link:    15px;
}

/* ------------- BASE / SEMANTIC ELEMENT STYLES ---------------- */
html, body {
  background: var(--tt-canvas);
  color: var(--tt-ink);
  font-family: var(--tt-font-body);
  font-size: var(--tt-body-md);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Fredoka 500–600 only (never 700+) */
h1, .tt-h1 {
  font-family: var(--tt-font-display);
  font-weight: 600;
  font-size: var(--tt-display-xl);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--tt-ink);
  margin: 0;
}
h2, .tt-h2 {
  font-family: var(--tt-font-display);
  font-weight: 600;
  font-size: var(--tt-display-lg);
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--tt-ink);
  margin: 0;
}
h3, .tt-h3 {
  font-family: var(--tt-font-display);
  font-weight: 500;
  font-size: var(--tt-display-md);
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: var(--tt-ink);
  margin: 0;
}
h4, .tt-h4 {
  font-family: var(--tt-font-display);
  font-weight: 500;
  font-size: var(--tt-display-sm);
  line-height: 1.2;
  color: var(--tt-ink);
  margin: 0;
}

/* Subheads / titles — Work Sans 600-700 */
h5, .tt-title-lg {
  font-family: var(--tt-font-body);
  font-weight: 700;
  font-size: var(--tt-title-lg);
  line-height: 1.3;
  color: var(--tt-ink);
  margin: 0;
}
h6, .tt-title-md {
  font-family: var(--tt-font-body);
  font-weight: 600;
  font-size: var(--tt-title-md);
  line-height: 1.4;
  color: var(--tt-ink);
  margin: 0;
}
.tt-title-sm {
  font-family: var(--tt-font-body);
  font-weight: 600;
  font-size: var(--tt-title-sm);
  line-height: 1.4;
  color: var(--tt-ink);
}

/* Body */
p, .tt-body-md {
  font-family: var(--tt-font-body);
  font-weight: 400;
  font-size: var(--tt-body-md);
  line-height: 1.6;
  color: var(--tt-body);
  margin: 0;
  text-wrap: pretty;
  max-width: 68ch;
}
.tt-body-lg {
  font-family: var(--tt-font-body);
  font-weight: 400;
  font-size: var(--tt-body-lg);
  line-height: 1.6;
  color: var(--tt-body);
}
.tt-body-sm {
  font-family: var(--tt-font-body);
  font-weight: 400;
  font-size: var(--tt-body-sm);
  line-height: 1.6;
  color: var(--tt-body);
}

/* Utility text styles */
.tt-eyebrow {
  font-family: var(--tt-font-body);
  font-weight: 600;
  font-size: var(--tt-eyebrow);
  line-height: 1.4;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tt-primary);
}
.tt-caption {
  font-family: var(--tt-font-body);
  font-weight: 500;
  font-size: var(--tt-caption);
  line-height: 1.4;
  color: var(--tt-muted);
}

/* Links — magenta on light only; switch to on-dark inside dark/magenta */
a, .tt-link {
  color: var(--tt-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover, .tt-link:hover { border-bottom-color: currentColor; }

.tt-on-dark a, .tt-on-dark .tt-link,
.tt-on-primary a, .tt-on-primary .tt-link {
  color: var(--tt-on-dark);
}

code, kbd, samp, .tt-mono {
  font-family: var(--tt-font-mono);
  font-size: 0.92em;
}

/* Selection */
::selection {
  background: var(--tt-primary);
  color: var(--tt-on-primary);
}

/* ------------- BUTTON LABEL TYPE ----------------------------- */
.tt-button-label {
  font-family: var(--tt-font-body);
  font-weight: 600;
  font-size: var(--tt-button);
  line-height: 1;
  letter-spacing: 0.2px;
}
.tt-nav-link {
  font-family: var(--tt-font-body);
  font-weight: 500;
  font-size: var(--tt-nav-link);
  line-height: 1.4;
}

/* ------------- RESPONSIVE TYPE SCALE ------------------------- */
@media (max-width: 768px) {
  :root {
    --tt-display-xl: 34px;
    --tt-display-lg: 30px;
    --tt-display-md: 26px;
    --tt-display-sm: 22px;
    --tt-space-section: 48px;
  }
}