/* Thinkera Academy — design tokens (identity refresh 17 September 2026; accent moved to azure 18 September 2026)
 *
 * Use the semantic roles (--tk-text-*, --tk-bg-*, --tk-action-*) and the scales (--tk-space-*,
 * --tk-radius-*, --tk-size-*). Do not reach for a raw ramp step in a component: the ramp changes,
 * the roles do not, and that is what keeps dark mode and a future re-brand cheap.
 *
 * Measured (WCAG 2.1, against #FFFFFF unless stated):
 *   royal   #113972  11.34   text, primary action, headings
 *   azure   #426EB5   5.09   body-size link text is fine, small print uses azure-600
 *   azure-600 #2F5795 7.20   links, quiet text on light
 *   teal    #0ABFA3   2.33   NEVER text on light; 7.76 on navy, ink-on-teal 7.40
 *   amber   #E0A542   2.18   surface only; amber-700 #8A5A10 (5.91) for its text
 *   azure-300 #8FB3E6 on royal-700 5.27, on royal-800 6.50, on navy-900 8.42; ink on azure-300 8.03
 * Rule (18 Sep 2026): light surfaces lead with royal, dark surfaces lead with azure-300. Teal is retired
 * from the site, to match the favicon, the lesson videos and the YouTube channel. The token stays for reference.
 */

:root {
  /* ---------- ramp (reference only; components use the roles below) */
  --tk-royal-900: #081D3D;
  --tk-royal-800: #0C2B58;
  --tk-royal-700: #113972;   /* primary */
  --tk-royal-600: #17488E;
  --tk-azure-700: #2F5795;
  --tk-azure-600: #426EB5;
  --tk-azure-300: #8FB3E6;
  --tk-azure-100: #D7E3F5;
  --tk-pale-100:  #E3E8F0;
  --tk-canvas:    #F8F9FB;
  --tk-white:     #FFFFFF;
  --tk-ink-900:   #0F1B2D;
  --tk-ink-600:   #475569;
  --tk-ink-400:   #6B7A90;
  --tk-navy-900:  #0A1628;
  --tk-navy-800:  #112336;
  --tk-navy-700:  #16304A;
  --tk-teal-500:  #0ABFA3;   /* retired 18 Sep 2026: kept for reference, not used */
  --tk-teal-700:  #0A8C7A;
  --tk-amber-500: #E0A542;
  --tk-amber-800: #8A5A10;
  --tk-good-600:  #1E7F4F;
  --tk-bad-600:   #B3372F;

  /* ---------- surfaces */
  --tk-bg-page: var(--tk-canvas);
  --tk-bg-surface: var(--tk-white);
  --tk-bg-raised: var(--tk-white);
  --tk-bg-quiet: var(--tk-pale-100);
  --tk-bg-brand: var(--tk-royal-700);
  --tk-bg-brand-deep: var(--tk-navy-900);
  --tk-bg-accent-quiet: var(--tk-azure-100);
  --tk-bg-hero: var(--tk-royal-700);
  --tk-accent-on-dark: var(--tk-azure-300);
  --tk-accent-on-dark-hover: #B3CCF0;

  /* ---------- text */
  --tk-text-strong: var(--tk-ink-900);
  --tk-text: #1F2A3C;
  --tk-text-muted: var(--tk-ink-600);
  --tk-text-brand: var(--tk-royal-700);
  --tk-text-link: var(--tk-azure-700);
  --tk-text-on-brand: var(--tk-white);
  --tk-text-on-accent: var(--tk-ink-900);

  /* ---------- lines and focus */
  --tk-border: #DDE3EC;
  --tk-border-strong: #C3CDDC;
  --tk-focus: var(--tk-royal-600);

  /* ---------- actions */
  --tk-action-primary-bg: var(--tk-royal-700);
  --tk-action-primary-bg-hover: var(--tk-royal-600);
  --tk-action-primary-text: var(--tk-white);
  --tk-action-secondary-bg: transparent;
  --tk-action-secondary-text: var(--tk-royal-700);
  --tk-action-secondary-border: var(--tk-border-strong);

  /* ---------- status (never colour alone: pair with an icon or a word) */
  --tk-good-text: var(--tk-good-600);
  --tk-good-bg: #EAF6EF;
  --tk-warn-text: var(--tk-amber-800);
  --tk-warn-bg: #FBF1DE;
  --tk-bad-text: var(--tk-bad-600);
  --tk-bad-bg: #FBEDEC;

  /* ---------- type */
  --tk-font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --tk-font-latin: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tk-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --tk-size-xs: 0.8125rem;   /* 13 */
  --tk-size-sm: 0.9375rem;   /* 15 */
  --tk-size-base: 1.0625rem; /* 17 — Arabic needs a touch more than 16 */
  --tk-size-md: 1.25rem;     /* 20 */
  --tk-size-lg: 1.5rem;      /* 24 */
  --tk-size-xl: 1.9375rem;   /* 31 */
  --tk-size-2xl: 2.4375rem;  /* 39 */
  --tk-size-3xl: 3.0625rem;  /* 49 */
  --tk-leading-tight: 1.3;
  --tk-leading-body: 1.75;   /* Arabic sits low: give it room */
  --tk-weight-regular: 400;
  --tk-weight-medium: 500;
  --tk-weight-semibold: 600;
  --tk-weight-bold: 700;
  --tk-measure: 68ch;

  /* ---------- space, radius, elevation, layout */
  --tk-space-1: 0.25rem;
  --tk-space-2: 0.5rem;
  --tk-space-3: 0.75rem;
  --tk-space-4: 1rem;
  --tk-space-5: 1.5rem;
  --tk-space-6: 2rem;
  --tk-space-7: 3rem;
  --tk-space-8: 4rem;
  --tk-space-9: 6rem;
  --tk-radius-sm: 8px;
  --tk-radius-md: 14px;
  --tk-radius-lg: 22px;
  --tk-radius-pill: 999px;
  --tk-shadow-sm: 0 1px 2px rgba(15, 27, 45, .06);
  --tk-shadow-md: 0 10px 30px rgba(15, 27, 45, .08);
  --tk-container: 1180px;
  --tk-container-narrow: 760px;
  --tk-speed: 180ms;
}

/* Dark scheme: the same roles, azure-300 leads. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tk-bg-page: var(--tk-navy-900);
    --tk-bg-surface: var(--tk-navy-800);
    --tk-bg-raised: var(--tk-navy-700);
    --tk-bg-quiet: #1B2C44;
    --tk-bg-brand: var(--tk-royal-600);
    --tk-bg-brand-deep: #06101E;
    --tk-bg-hero: var(--tk-royal-800);
    --tk-bg-accent-quiet: #17304F;
    --tk-text-strong: var(--tk-white);
    --tk-text: #E6ECF5;
    --tk-text-muted: #A9B8CC;
    --tk-text-brand: var(--tk-azure-300);
    --tk-text-link: #9CC7F5;
    --tk-text-on-brand: var(--tk-white);
    --tk-text-on-accent: var(--tk-ink-900);
    --tk-border: #22374F;
    --tk-border-strong: #325072;
    --tk-focus: var(--tk-azure-300);
    --tk-action-primary-bg: var(--tk-azure-300);
    --tk-action-primary-bg-hover: #B3CCF0;
    --tk-action-primary-text: var(--tk-ink-900);
    --tk-action-secondary-text: var(--tk-azure-300);
    --tk-action-secondary-border: #325072;
    --tk-good-text: #81C995;
    --tk-good-bg: #10301F;
    --tk-warn-text: #FDD663;
    --tk-warn-bg: #33270C;
    --tk-bad-text: #F28B82;
    --tk-bad-bg: #3A1614;
    --tk-shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tk-bg-page: var(--tk-navy-900);
  --tk-bg-surface: var(--tk-navy-800);
  --tk-bg-raised: var(--tk-navy-700);
  --tk-bg-quiet: #1B2C44;
  --tk-bg-brand: var(--tk-royal-600);
  --tk-bg-brand-deep: #06101E;
  --tk-bg-hero: var(--tk-royal-800);
  --tk-bg-accent-quiet: #17304F;
  --tk-text-strong: var(--tk-white);
  --tk-text: #E6ECF5;
  --tk-text-muted: #A9B8CC;
  --tk-text-brand: var(--tk-azure-300);
  --tk-text-link: #9CC7F5;
  --tk-border: #22374F;
  --tk-border-strong: #325072;
  --tk-focus: var(--tk-azure-300);
  --tk-action-primary-bg: var(--tk-azure-300);
  --tk-action-primary-bg-hover: #B3CCF0;
  --tk-action-primary-text: var(--tk-ink-900);
  --tk-action-secondary-text: var(--tk-azure-300);
  --tk-action-secondary-border: #325072;
  --tk-good-text: #81C995;
  --tk-good-bg: #10301F;
  --tk-warn-text: #FDD663;
  --tk-warn-bg: #33270C;
  --tk-bad-text: #F28B82;
  --tk-bad-bg: #3A1614;
  --tk-shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
}