/* Kicko brand tokens + self-hosted fonts.
 * Single source of truth: kicko-brand/. Run kicko-brand/sync.sh to copy this
 * file, logo/ and fonts/ into each app's public /brand folder. Do not edit the
 * copies under site/public/brand or partner/public/brand. */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); }

:root {
  --k-blue: #2457F5;
  --k-blue-700: #1C46D1;
  --k-blue-50: #EEF3FF;
  --k-orange: #F26A00;
  --k-orange-100: #FFE7D1;
  --k-orange-text: #8A3A00;
  --k-ink: #0E1B2C;
  --k-slate: #51607A;
  --k-chalk: #F5F7FA;
  --k-surface: #FFFFFF;
  --k-mist: #E3E8F0;
  --k-control-border: #7F8DA6;
  --k-success: #0D7F53;
  --k-success-100: #DDF3E8;
  --k-success-text: #0A6B45;
  --k-danger: #D92D20;
  --k-danger-100: #FEE4E2;
  --k-danger-text: #B42318;
  --k-neutral-100: #E3E8F0;
  --k-neutral-text: #3A4960;

  --k-bg: var(--k-chalk);
  --k-text: var(--k-ink);
  --k-text-muted: var(--k-slate);
  --k-link: var(--k-blue);
  --k-border: var(--k-mist);
  --k-focus: var(--k-blue);

  --k-radius-control: 12px;
  --k-radius-card: 16px;
  --k-radius-modal: 24px;
  --k-radius-pill: 999px;

  --k-font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-font-body: "DM Sans", "IBM Plex Sans Arabic", var(--k-font-fallback);
  --k-font-heading: "Outfit", "IBM Plex Sans Arabic", var(--k-font-fallback);
  --k-font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", var(--k-font-fallback);
}

/* Dark mode: opt-in per app via data-theme="dark", or automatic where the app
 * does not pin data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --k-bg: #0B1524;
    --k-surface: #12223A;
    --k-text: #F2F5FA;
    --k-text-muted: #A9B6CC;
    --k-link: #7FA0FF;
    --k-border: #23344D;
    --k-focus: #7FA0FF;
    --k-success-text: #5DD4A0;
    --k-danger-text: #FF8A80;
    --k-orange-text: #FF9A4D;
  }
}
:root[data-theme="dark"] {
  --k-bg: #0B1524;
  --k-surface: #12223A;
  --k-text: #F2F5FA;
  --k-text-muted: #A9B6CC;
  --k-link: #7FA0FF;
  --k-border: #23344D;
  --k-focus: #7FA0FF;
  --k-success-text: #5DD4A0;
  --k-danger-text: #FF8A80;
  --k-orange-text: #FF9A4D;
}

:lang(ar) { font-family: var(--k-font-arabic); }

@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;
  }
}