/* ============================================================
   Yahya Kanzi · Design System
   colors_and_type.css — base tokens + semantic styles
   ============================================================ */

/* ---------- Webfonts ----------
   Display: Space Grotesk (variable) — geometric, premium, tech-leaning
   Body:    Manrope (variable)       — clean, modern, very readable
   Mono:    JetBrains Mono           — code / tech accents
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Manrope:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ BRAND COLORS ============ */
  /* Foundations */
  --yk-ink:            #0D1117;  /* deepest dark, page background */
  --yk-bone:           #F7F4EE;  /* off-white, primary foreground */

  /* Accents */
  --yk-turquoise:      #44D7C6;  /* primary AI accent */
  --yk-blue:           #4D7CFF;  /* secondary accent — links, info */
  --yk-gold:           #F0B75A;  /* tertiary accent — highlight, badges */

  /* Tonal turquoise scale */
  --yk-turquoise-100:  #E2FBF7;
  --yk-turquoise-300:  #8AE7DC;
  --yk-turquoise-500:  #44D7C6;
  --yk-turquoise-700:  #2A9E91;
  --yk-turquoise-900:  #144D45;

  /* Surface scale (dark theme, elevations) */
  --yk-surface-0:      #0D1117;  /* page */
  --yk-surface-1:      #11161E;  /* card on page */
  --yk-surface-2:      #161D27;  /* elevated card / hover */
  --yk-surface-3:      #1E2733;  /* menus, modals */
  --yk-surface-4:      #2A3441;  /* highest elevation */

  /* Foreground tonal scale */
  --yk-fg-1:           #F7F4EE;            /* primary text */
  --yk-fg-2:           rgba(247,244,238,.72); /* secondary text */
  --yk-fg-3:           rgba(247,244,238,.58); /* tertiary, captions — bumped from .50 to hold WCAG AA at small sizes */
  --yk-fg-4:           rgba(247,244,238,.28); /* muted, dividers caption */
  --yk-fg-5:           rgba(247,244,238,.12); /* very faint */

  /* Borders & dividers */
  --yk-border-soft:    rgba(247,244,238,.06);
  --yk-border:         rgba(247,244,238,.10);
  --yk-border-strong:  rgba(247,244,238,.18);
  --yk-border-accent:  rgba(68,215,198,.32);

  /* Semantic */
  --yk-success:        #44D7C6;
  --yk-info:           #4D7CFF;
  --yk-warning:        #F0B75A;
  --yk-danger:         #F26E6E;

  /* ============ TYPOGRAPHY ============ */
  --yk-font-display:   "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --yk-font-body:      "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --yk-font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (rem on a 16px base) */
  --yk-text-xs:        0.75rem;   /* 12 */
  --yk-text-sm:        0.875rem;  /* 14 */
  --yk-text-base:      1rem;      /* 16 */
  --yk-text-md:        1.125rem;  /* 18 */
  --yk-text-lg:        1.375rem;  /* 22 */
  --yk-text-xl:        1.75rem;   /* 28 */
  --yk-text-2xl:       2.25rem;   /* 36 */
  --yk-text-3xl:       3rem;      /* 48 */
  --yk-text-4xl:       4rem;      /* 64 */
  --yk-text-5xl:       5.25rem;   /* 84 */

  /* Line heights */
  --yk-lh-tight:       1.05;
  --yk-lh-snug:        1.18;
  --yk-lh-normal:      1.5;
  --yk-lh-loose:       1.7;

  /* Letter spacing */
  --yk-tracking-tight: -0.02em;
  --yk-tracking-snug:  -0.012em;
  --yk-tracking-normal: 0;
  --yk-tracking-wide:  0.04em;
  --yk-tracking-eyebrow: 0.16em;

  /* Weight aliases */
  --yk-w-light:        300;
  --yk-w-regular:      400;
  --yk-w-medium:       500;
  --yk-w-semibold:     600;
  --yk-w-bold:         700;

  /* ============ SPACING (4-base) ============ */
  --yk-space-1:        4px;
  --yk-space-2:        8px;
  --yk-space-3:        12px;
  --yk-space-4:        16px;
  --yk-space-5:        24px;
  --yk-space-6:        32px;
  --yk-space-7:        48px;
  --yk-space-8:        64px;
  --yk-space-9:        96px;
  --yk-space-10:       128px;

  /* ============ RADII ============ */
  --yk-radius-xs:      4px;
  --yk-radius-sm:      8px;
  --yk-radius-md:      12px;
  --yk-radius-lg:      18px;
  --yk-radius-xl:      24px;
  --yk-radius-2xl:     32px;
  --yk-radius-full:    9999px;

  /* ============ SHADOWS / GLOWS ============ */
  --yk-shadow-1:       0 1px 2px rgba(0,0,0,.4);
  --yk-shadow-2:       0 8px 24px rgba(0,0,0,.35);
  --yk-shadow-3:       0 24px 60px rgba(0,0,0,.5);
  --yk-glow-turquoise: 0 0 40px rgba(68,215,198,.18);
  --yk-glow-blue:      0 0 48px rgba(77,124,255,.22);
  --yk-glow-gold:      0 0 36px rgba(240,183,90,.20);

  /* Inner highlight for premium cards (top-edge sheen) */
  --yk-inner-sheen:    inset 0 1px 0 rgba(247,244,238,.06);

  /* ============ MOTION ============ */
  --yk-ease-out:       cubic-bezier(.22,.61,.36,1);
  --yk-ease-in-out:    cubic-bezier(.65,0,.35,1);
  --yk-ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --yk-dur-fast:       140ms;
  --yk-dur:            240ms;
  --yk-dur-slow:       420ms;

  /* ============ LAYOUT ============ */
  --yk-container:      1200px;
  --yk-container-narrow: 880px;
  --yk-gutter:         clamp(20px, 4vw, 48px);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--yk-ink);
  color: var(--yk-fg-1);
  font-family: var(--yk-font-body);
  font-size: var(--yk-text-base);
  line-height: var(--yk-lh-normal);
  font-weight: var(--yk-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(68,215,198,.28);
  color: var(--yk-fg-1);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes on elements that need branded type styling.
   ============================================================ */

.yk-eyebrow {
  font-family: var(--yk-font-mono);
  font-size: var(--yk-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--yk-tracking-eyebrow);
  color: var(--yk-turquoise);
  font-weight: var(--yk-w-medium);
}

.yk-h1, h1.yk {
  font-family: var(--yk-font-display);
  font-size: clamp(2.5rem, 6vw, var(--yk-text-5xl));
  line-height: var(--yk-lh-tight);
  letter-spacing: var(--yk-tracking-tight);
  font-weight: var(--yk-w-medium);
  color: var(--yk-fg-1);
  text-wrap: balance;
}

.yk-h2, h2.yk {
  font-family: var(--yk-font-display);
  font-size: clamp(2rem, 4.5vw, var(--yk-text-3xl));
  line-height: var(--yk-lh-snug);
  letter-spacing: var(--yk-tracking-snug);
  font-weight: var(--yk-w-medium);
  color: var(--yk-fg-1);
  text-wrap: balance;
}

.yk-h3, h3.yk {
  font-family: var(--yk-font-display);
  font-size: var(--yk-text-xl);
  line-height: var(--yk-lh-snug);
  letter-spacing: var(--yk-tracking-snug);
  font-weight: var(--yk-w-medium);
  color: var(--yk-fg-1);
}

.yk-h4, h4.yk {
  font-family: var(--yk-font-display);
  font-size: var(--yk-text-lg);
  line-height: var(--yk-lh-snug);
  font-weight: var(--yk-w-medium);
  color: var(--yk-fg-1);
}

.yk-lede {
  font-family: var(--yk-font-body);
  font-size: var(--yk-text-md);
  line-height: var(--yk-lh-loose);
  color: var(--yk-fg-2);
  font-weight: var(--yk-w-regular);
  text-wrap: pretty;
}

.yk-p, p.yk {
  font-family: var(--yk-font-body);
  font-size: var(--yk-text-base);
  line-height: var(--yk-lh-loose);
  color: var(--yk-fg-2);
  text-wrap: pretty;
}

.yk-small {
  font-size: var(--yk-text-sm);
  color: var(--yk-fg-3);
  line-height: var(--yk-lh-normal);
}

.yk-caption {
  font-family: var(--yk-font-mono);
  font-size: var(--yk-text-xs);
  color: var(--yk-fg-3);
  letter-spacing: 0.02em;
}

.yk-mono {
  font-family: var(--yk-font-mono);
  font-feature-settings: "ss01", "ss02";
}

/* Links */
.yk-link, a.yk {
  color: var(--yk-fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--yk-border-strong);
  transition: color var(--yk-dur) var(--yk-ease-out),
              border-color var(--yk-dur) var(--yk-ease-out);
}
.yk-link:hover, a.yk:hover {
  color: var(--yk-turquoise);
  border-bottom-color: var(--yk-turquoise);
}

/* Inline accent (the "turquoise underline" gesture) */
.yk-accent {
  color: var(--yk-turquoise);
}
.yk-accent-gold {
  color: var(--yk-gold);
}
.yk-accent-blue {
  color: var(--yk-blue);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Keyboard focus ring — visible only when using the keyboard. */
:focus-visible {
  outline: 2px solid var(--yk-turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 4px;
}

/* Skip-to-content — hidden until focused. */
.yk-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--yk-turquoise);
  color: var(--yk-ink);
  font-family: var(--yk-font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--yk-ease-out);
}
.yk-skip:focus { transform: translateY(0); }

/* Mobile menu visibility helpers. JS toggles state on the button + drawer. */
.yk-burger { display: none; }
.yk-mobile-drawer { display: none; }

@media (max-width: 960px) {
  .yk-burger { display: inline-flex !important; }
  .yk-header-cta { display: none !important; }
  .yk-mobile-drawer { display: flex !important; }
}

/* Respect prefers-reduced-motion — kills CSS animations + transitions globally.
   Framer Motion components also need a useReducedMotion guard for full coverage,
   but this catches the worst offenders (yk-float infinite badge, transitions). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}