/* ============================================================
   Pakademi Design System — Tokens
   colors_and_type.css

   Brand: Pakademi (pakademi.com.tr)
   Turkish online English-learning platform by Arda Erol.
   Personality: Friendly, modern, clean, motivating, trustworthy.
   ============================================================ */

/* Fonts ---------------------------------------------------------
   The Pakademi wordmark is set in a heavy, rounded geometric sans
   with fully-rounded terminals. The closest free match is
   Nunito (Black, 900) — also a good choice for Turkish glyphs.
   Until brand-supplied font files arrive, we load Nunito from
   Google Fonts.
--------------------------------------------------------------- */
/* Brand font — MADE Tommy Soft (provided by brand, personal-use licensed) */
@font-face { font-family: "MADE Tommy Soft"; font-weight: 100; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Thin_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Light_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Regular_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Medium_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Bold_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_ExtraBold_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Black_PERSONAL_USE.otf") format("opentype"); }

/* Outline variants — for hero accents / decorative use only */
@font-face { font-family: "MADE Tommy Soft Outline"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Regular_Outline_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft Outline"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Bold_Outline_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft Outline"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_ExtraBold_Outline_PERSONAL_USE.otf") format("opentype"); }
@font-face { font-family: "MADE Tommy Soft Outline"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/MADE_Tommy_Soft_Black_Outline_PERSONAL_USE.otf") format("opentype"); }

/* Fallback / loaded after MADE for icons + mono */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  /* Primary turquoise — identity, trust, credibility */
  --pa-turquoise-50:  #e7faf7;
  --pa-turquoise-100: #c5f1ea;
  --pa-turquoise-200: #8fe3d5;
  --pa-turquoise-300: #54d0bd;
  --pa-turquoise-400: #2bc1aa;
  --pa-turquoise-500: #13b5a2;   /* ← brand primary */
  --pa-turquoise-600: #0e9888;
  --pa-turquoise-700: #0d7a6e;
  --pa-turquoise-800: #0d5d55;
  --pa-turquoise-900: #0c4842;

  /* Secondary — yellow→orange CTA gradient. Energy, attention, urgency. */
  --pa-yellow-400: #ffc24a;
  --pa-yellow-500: #ffb022;        /* gradient start */
  --pa-orange-500: #ff7a18;        /* gradient mid */
  --pa-orange-600: #f25c0a;        /* gradient end */
  --pa-cta-gradient: linear-gradient(135deg, #ffb022 0%, #ff7a18 55%, #f25c0a 100%);
  --pa-cta-gradient-vertical: linear-gradient(180deg, #ffb022 0%, #ff7a18 55%, #f25c0a 100%);

  /* Soft turquoise gradient — large brand washes */
  --pa-brand-gradient: linear-gradient(135deg, #2bc1aa 0%, #13b5a2 60%, #0e9888 100%);
  --pa-brand-wash: linear-gradient(180deg, #e7faf7 0%, #ffffff 100%);

  /* ---------- Neutrals ---------- */
  /* Logo wordmark is set in a near-black with a slight green/blue tint
     (sampled from the dark logo). We use this as the primary ink. */
  --pa-ink-900: #13211d;    /* brand dark (deep green-black) */
  --pa-ink-800: #1d2e2b;
  --pa-ink-700: #344541;
  --pa-ink-600: #4f615d;
  --pa-ink-500: #6e807c;
  --pa-ink-400: #93a4a0;
  --pa-ink-300: #c2cecb;
  --pa-ink-200: #dfe7e4;
  --pa-ink-100: #eef3f1;
  --pa-ink-50:  #f6f9f8;
  --pa-white:   #ffffff;

  /* ---------- Semantic ---------- */
  --pa-success: #1aaf6c;
  --pa-success-bg: #e6f7ee;
  --pa-warning: #ffb022;
  --pa-warning-bg: #fff5e0;
  --pa-danger: #e8463c;
  --pa-danger-bg: #fde9e7;
  --pa-info: #13b5a2;        /* turquoise doubles as info */
  --pa-info-bg: #e7faf7;

  /* ---------- Foreground / background roles ---------- */
  --pa-bg:        var(--pa-white);
  --pa-bg-soft:   var(--pa-ink-50);
  --pa-bg-muted:  var(--pa-ink-100);
  --pa-bg-brand:  var(--pa-turquoise-50);

  --pa-fg:        var(--pa-ink-900);
  --pa-fg-muted:  var(--pa-ink-600);
  --pa-fg-subtle: var(--pa-ink-500);
  --pa-fg-on-brand: var(--pa-white);

  --pa-border:        var(--pa-ink-200);
  --pa-border-strong: var(--pa-ink-300);
  --pa-border-brand:  var(--pa-turquoise-200);

  /* ---------- Typography ---------- */
  --pa-font-display: "MADE Tommy Soft", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pa-font-display-outline: "MADE Tommy Soft Outline", "MADE Tommy Soft", sans-serif;
  --pa-font-body:    "MADE Tommy Soft", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pa-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — mobile-first, comfortable */
  --pa-text-xs:   12px;
  --pa-text-sm:   14px;
  --pa-text-base: 16px;
  --pa-text-md:   18px;
  --pa-text-lg:   20px;
  --pa-text-xl:   24px;
  --pa-text-2xl:  30px;
  --pa-text-3xl:  36px;
  --pa-text-4xl:  44px;
  --pa-text-5xl:  56px;
  --pa-text-6xl:  72px;

  /* Line heights */
  --pa-leading-tight:   1.15;
  --pa-leading-snug:    1.3;
  --pa-leading-normal:  1.5;
  --pa-leading-relaxed: 1.65;

  /* Weights */
  --pa-weight-regular: 400;
  --pa-weight-medium:  500;
  --pa-weight-semibold: 600;
  --pa-weight-bold:    700;
  --pa-weight-extrabold: 800;
  --pa-weight-black:   900;

  /* Tracking — Nunito reads best slightly tight at display sizes */
  --pa-tracking-display: -0.02em;
  --pa-tracking-tight:   -0.01em;
  --pa-tracking-normal:  0;
  --pa-tracking-wide:    0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --pa-space-1:  4px;
  --pa-space-2:  8px;
  --pa-space-3:  12px;
  --pa-space-4:  16px;
  --pa-space-5:  20px;
  --pa-space-6:  24px;
  --pa-space-8:  32px;
  --pa-space-10: 40px;
  --pa-space-12: 48px;
  --pa-space-16: 64px;
  --pa-space-20: 80px;
  --pa-space-24: 96px;

  /* ---------- Radius ---------- */
  /* Pakademi visuals run soft & rounded — match the logo's curves. */
  --pa-radius-xs:   6px;
  --pa-radius-sm:   10px;
  --pa-radius-md:   14px;
  --pa-radius-lg:   20px;
  --pa-radius-xl:   28px;
  --pa-radius-2xl:  36px;
  --pa-radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  /* Soft, low-contrast — never heavy or dark */
  --pa-shadow-xs: 0 1px 2px rgba(15, 31, 29, 0.06);
  --pa-shadow-sm: 0 2px 6px rgba(15, 31, 29, 0.06), 0 1px 2px rgba(15, 31, 29, 0.04);
  --pa-shadow-md: 0 6px 16px rgba(15, 31, 29, 0.07), 0 2px 4px rgba(15, 31, 29, 0.04);
  --pa-shadow-lg: 0 12px 28px rgba(15, 31, 29, 0.10), 0 4px 8px rgba(15, 31, 29, 0.05);
  --pa-shadow-xl: 0 24px 48px rgba(15, 31, 29, 0.12), 0 8px 16px rgba(15, 31, 29, 0.06);

  /* Brand-tinted shadow — used under primary CTAs / brand cards */
  --pa-shadow-brand-sm: 0 4px 12px rgba(19, 181, 162, 0.18);
  --pa-shadow-brand-md: 0 10px 24px rgba(19, 181, 162, 0.22);
  --pa-shadow-cta:      0 10px 24px rgba(255, 122, 24, 0.28);

  /* ---------- Motion ---------- */
  --pa-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --pa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pa-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pa-dur-fast:    120ms;
  --pa-dur-base:    200ms;
  --pa-dur-slow:    400ms;

  /* ---------- Z ---------- */
  --pa-z-base: 1;
  --pa-z-sticky: 100;
  --pa-z-overlay: 500;
  --pa-z-modal: 1000;
  --pa-z-toast: 2000;
}

/* ============================================================
   Semantic element styles
   Apply these classes (or use the tags directly) for consistent
   typography across the system.
   ============================================================ */

html, body {
  font-family: var(--pa-font-body);
  color: var(--pa-fg);
  background: var(--pa-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pa-display-1, h1.pa-display {
  font-family: var(--pa-font-display);
  font-weight: var(--pa-weight-black);
  font-size: var(--pa-text-6xl);
  line-height: var(--pa-leading-tight);
  letter-spacing: var(--pa-tracking-display);
  color: var(--pa-fg);
}

.pa-h1, h1 {
  font-family: var(--pa-font-display);
  font-weight: var(--pa-weight-extrabold);
  font-size: var(--pa-text-4xl);
  line-height: var(--pa-leading-tight);
  letter-spacing: var(--pa-tracking-display);
  color: var(--pa-fg);
}

.pa-h2, h2 {
  font-family: var(--pa-font-display);
  font-weight: var(--pa-weight-extrabold);
  font-size: var(--pa-text-3xl);
  line-height: var(--pa-leading-snug);
  letter-spacing: var(--pa-tracking-tight);
  color: var(--pa-fg);
}

.pa-h3, h3 {
  font-family: var(--pa-font-display);
  font-weight: var(--pa-weight-bold);
  font-size: var(--pa-text-2xl);
  line-height: var(--pa-leading-snug);
  letter-spacing: var(--pa-tracking-tight);
  color: var(--pa-fg);
}

.pa-h4, h4 {
  font-family: var(--pa-font-display);
  font-weight: var(--pa-weight-bold);
  font-size: var(--pa-text-xl);
  line-height: var(--pa-leading-snug);
  color: var(--pa-fg);
}

.pa-lead {
  font-family: var(--pa-font-body);
  font-weight: var(--pa-weight-regular);
  font-size: var(--pa-text-lg);
  line-height: var(--pa-leading-relaxed);
  color: var(--pa-fg-muted);
}

.pa-body, p {
  font-family: var(--pa-font-body);
  font-weight: var(--pa-weight-regular);
  font-size: var(--pa-text-base);
  line-height: var(--pa-leading-relaxed);
  color: var(--pa-fg);
}

.pa-small, small {
  font-size: var(--pa-text-sm);
  line-height: var(--pa-leading-normal);
  color: var(--pa-fg-muted);
}

.pa-eyebrow {
  font-family: var(--pa-font-body);
  font-weight: var(--pa-weight-bold);
  font-size: var(--pa-text-xs);
  letter-spacing: var(--pa-tracking-wide);
  text-transform: uppercase;
  color: var(--pa-turquoise-600);
}

.pa-code, code {
  font-family: var(--pa-font-mono);
  font-size: 0.92em;
  background: var(--pa-ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--pa-radius-xs);
  color: var(--pa-ink-800);
}