/* =====================================================================
   YakClick — Brand Design System (design tokens)
   Derived from the logo: royal blue #2870E8 + black wordmark.
   Everything visual in the site references these tokens.
   ===================================================================== */

/* ---- Self-hosted fonts (no external CDN — CSP-safe) ---- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/jakarta-700.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/jakarta-800.woff2") format("woff2"); }
@font-face { font-family:"Vazirmatn"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/vazir-400.woff2") format("woff2"); }
@font-face { font-family:"Vazirmatn"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/vazir-700.woff2") format("woff2"); }

:root {
  /* ---- Brand ---- */
  --yc-blue:        #2870E8;   /* primary — sampled from logo */
  --yc-blue-600:    #1B54C0;   /* hover / pressed */
  --yc-blue-700:    #163F94;   /* deep text-on-light accent */
  --yc-blue-300:    #6E9DF2;   /* light accent */
  --yc-blue-tint:   #E6EDFC;   /* faint fills, chips */
  --yc-ink:         #0F1520;   /* near-black, wordmark */

  /* ---- Neutrals (cool, slight blue bias — reads "chosen") ---- */
  --yc-bg:          #F4F6FA;
  --yc-surface:     #FFFFFF;
  --yc-surface-2:   #EDF1F8;
  --yc-text:        #141A26;
  --yc-text-soft:   #46506180;  /* placeholder, overwritten below */
  --yc-text-soft:   #465061;
  --yc-text-faint:  #6C7789;
  --yc-line:        #DCE2EC;
  --yc-line-soft:   #E8ECF3;

  /* ---- Semantic ---- */
  --yc-success:     #1F8A5B;
  --yc-warning:     #B4791A;
  --yc-danger:      #C6392E;

  /* ---- Typography ---- */
  --yc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yc-font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yc-font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, monospace;
  /* RTL fonts (Farsi / Pashto) — self-hosted Vazirmatn */
  --yc-font-rtl: "Vazirmatn", "Segoe UI", Tahoma, "Iranian Sans", "Noto Naskh Arabic", sans-serif;

  --yc-fs-xs:   0.8125rem;   /* 13px */
  --yc-fs-sm:   0.9375rem;   /* 15px */
  --yc-fs-base: 1rem;        /* 16px */
  --yc-fs-lg:   1.125rem;    /* 18px */
  --yc-fs-xl:   1.375rem;    /* 22px */
  --yc-fs-2xl:  1.75rem;     /* 28px */
  --yc-fs-3xl:  2.25rem;     /* 36px */
  --yc-fs-4xl:  clamp(2.25rem, 4.5vw, 3.5rem);

  /* ---- Space / shape / motion ---- */
  --yc-radius:    10px;
  --yc-radius-sm: 8px;
  --yc-radius-lg: 16px;
  --yc-shadow-sm: 0 1px 2px rgba(15,21,32,.06), 0 1px 3px rgba(15,21,32,.05);
  --yc-shadow:    0 4px 16px rgba(15,21,32,.08), 0 2px 6px rgba(15,21,32,.05);
  --yc-shadow-lg: 0 18px 50px rgba(20,40,90,.16);
  --yc-shadow-blue: 0 10px 30px rgba(40,112,232,.28);
  --yc-container: 1360px;
  --yc-ease: cubic-bezier(.22,.61,.36,1);

  /* ---- Bootstrap 5 variable overrides → brand inherits into all BS components ---- */
  --bs-primary: var(--yc-blue);
  --bs-primary-rgb: 40,112,232;
  --bs-link-color: var(--yc-blue-600);
  --bs-link-hover-color: var(--yc-blue-700);
  --bs-body-font-family: var(--yc-font-sans);
  --bs-body-color: var(--yc-text);
  --bs-body-bg: var(--yc-bg);
  --bs-border-color: var(--yc-line);
  --bs-border-radius: var(--yc-radius);
}

/* ---- Dark theme (system preference) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --yc-bg:         #0A0E16;
    --yc-surface:    #121926;
    --yc-surface-2:  #1A2233;
    --yc-text:       #E9EEF7;
    --yc-text-soft:  #B3BECE;
    --yc-text-faint: #7C899C;
    --yc-line:       #26324A;
    --yc-line-soft:  #1C2537;
    --yc-blue:       #4E86F0;
    --yc-blue-600:   #6E9DF2;
    --yc-blue-700:   #8AB0F6;
    --yc-blue-tint:  #14213E;
    --yc-shadow-lg:  0 18px 50px rgba(0,0,0,.5);
    --yc-shadow-blue:0 10px 30px rgba(40,112,232,.4);
    --bs-primary-rgb: 78,134,240;
    --bs-body-color: #E9EEF7;
    --bs-body-bg: #0A0E16;
  }
}

/* ---- Explicit theme toggle wins over media query in both directions ---- */
:root[data-theme="dark"] {
  --yc-bg:         #0A0E16;
  --yc-surface:    #121926;
  --yc-surface-2:  #1A2233;
  --yc-text:       #E9EEF7;
  --yc-text-soft:  #B3BECE;
  --yc-text-faint: #7C899C;
  --yc-line:       #26324A;
  --yc-line-soft:  #1C2537;
  --yc-blue:       #4E86F0;
  --yc-blue-600:   #6E9DF2;
  --yc-blue-700:   #8AB0F6;
  --yc-blue-tint:  #14213E;
  --yc-shadow-lg:  0 18px 50px rgba(0,0,0,.5);
  --yc-shadow-blue:0 10px 30px rgba(40,112,232,.4);
  --bs-primary-rgb: 78,134,240;
  --bs-body-color: #E9EEF7;
  --bs-body-bg: #0A0E16;
}
:root[data-theme="light"] {
  --yc-bg: #F4F6FA; --yc-surface:#FFFFFF; --yc-surface-2:#EDF1F8;
  --yc-text:#141A26; --yc-text-soft:#465061; --yc-text-faint:#6C7789;
  --yc-line:#DCE2EC; --yc-line-soft:#E8ECF3; --yc-blue:#2870E8;
  --yc-blue-600:#1B54C0; --yc-blue-700:#163F94; --yc-blue-tint:#E6EDFC;
  --bs-primary-rgb:40,112,232; --bs-body-color:#141A26; --bs-body-bg:#F4F6FA;
}