/* ============================================================
   TKAWEN — design tokens
   Single source of truth for every surface on tkawen.com.
   Lifted from the homepage so the mother site remains the reference.

   Import order matters:
     @import url("https://brand.tkawen.com/system/fonts.css");
     @import url("https://brand.tkawen.com/system/tokens.css");

   Dark mode responds to BOTH mechanisms in use across the ecosystem:
     html.dark                  (homepage)
     :root[data-theme="dark"]   (blog, account)
   Light stays the default; nothing switches on the visitor without their say.
   ============================================================ */

:root {
  /* brand accent — identical in both themes */
  --accent:#2F6BF6;
  --accent-2:#2F6BF6;         /* accent used on text; overridden in dark to lighten */
  --accent-deep:#1E40AF;
  --accent-ink:#0A1020;       /* deep navy chip (fixed both themes) */
  --chip-ink:#9DBEFF;         /* icon color on navy chip */

  /* ---- LIGHT theme (default) ---- */
  --bg:#F5F8FD;               /* page background */
  --panel:#FFFFFF;            /* alternating "paper" panels */
  --panel-tint:#EEF3FB;       /* faint tinted band */
  --card:#FFFFFF;             /* card surface */
  --card-2:#F3F7FC;           /* nested surface / table head */
  --card-grad:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  --hi-grad:linear-gradient(180deg,#F1F6FF,#FFFFFF);   /* highlighted plan */

  --text:#0E1729;
  --text-strong:#0A1020;
  --muted:#5A6B84;

  --border:#E3EAF4;
  --border-soft:#EEF2F9;
  --accent-tint:rgba(47,107,246,.06);
  --accent-line:rgba(47,107,246,.16);
  --track:rgba(15,23,42,.07);
  --dot:rgba(47,107,246,.10);
  --bp-line:rgba(47,107,246,.055);--bp-major:rgba(47,107,246,.09);--bp-dot:rgba(47,107,246,.20);

  --ok:#1E9E63;  --ok-soft:rgba(30,158,99,.10);
  --bad:#D5544A; --bad-soft:rgba(213,84,74,.10);

  --shadow-sm:0 2px 10px -3px rgba(16,32,64,.10);
  --shadow:0 22px 55px -28px rgba(16,32,64,.24);
  --shadow-lg:0 44px 100px -44px rgba(16,32,64,.30);

  --nav-bg:rgba(255,255,255,.82);

  --fd:'Alexandria','IBM Plex Sans Arabic',sans-serif;
  --fb:'Tajawal','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --fm:'IBM Plex Mono',monospace;
  --r:16px; --r-sm:11px; 
  color-scheme:light;
}

html.dark,
:root[data-theme="dark"] {
  --accent-2:#7EA8FF;
  --bg:#0A1020;
  --panel:#0E1526;
  --panel-tint:#0C1322;
  --card:#141D33;
  --card-2:#0E1526;
  --card-grad:linear-gradient(170deg,#151F37,#0E1526);
  --hi-grad:linear-gradient(175deg,#101B33,#0E1526);

  --text:#EAF0F9;
  --text-strong:#FFFFFF;
  --muted:#93A0B4;

  --border:rgba(96,165,250,.18);
  --border-soft:rgba(96,165,250,.10);
  --accent-tint:rgba(47,107,246,.08);
  --accent-line:rgba(96,165,250,.22);
  --track:rgba(255,255,255,.07);
  --dot:rgba(47,107,246,.16);
  --bp-line:rgba(126,168,255,.07);--bp-major:rgba(126,168,255,.11);--bp-dot:rgba(126,168,255,.24);

  --ok:#3FA372;  --ok-soft:rgba(63,163,114,.14);
  --bad:#D5544A; --bad-soft:rgba(213,84,74,.13);

  --shadow-sm:0 2px 12px -3px rgba(0,0,0,.55);
  --shadow:0 30px 70px -30px rgba(0,0,0,.85);
  --shadow-lg:0 44px 100px -44px rgba(0,0,0,.88);

  --nav-bg:rgba(10,16,32,.78);
  color-scheme:dark;
}

/* Utilities every surface needs and each one had been redefining. */
.tk-num, .tk-ltr { font-family: var(--fm); direction: ltr; font-variant-numeric: tabular-nums; }
.tk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}