/*!
 * TKAWEN Brand Tokens — bundled
 * Source of truth: https://brand.tkawen.com/tokens/
 * Drop-in: <link rel="stylesheet" href="/brand/tokens.css">
 * Then reference: color: var(--tkw-text-primary)
 *                background: var(--tkw-success-bg)
 *                font-family: var(--tkw-font-display)
 *                padding: var(--tkw-space-6)
 *                border-radius: var(--tkw-radius-2xl)
 *                transition: all var(--tkw-duration-fast) var(--tkw-ease-out)
 */

/* ════════ colors.css ════════ */
/*
 * TKAWEN Brand · Color tokens (CSS custom properties)
 * Drop into any product. Reference via var(--tkw-...).
 * Mirror of tokens/colors.json.
 */

:root {
  /* ═══════════════ NEUTRALS (Slate scale) ═══════════════ */
  --tkw-neutral-0:   #ffffff;
  --tkw-neutral-50:  #f8fafc;
  --tkw-neutral-100: #f1f5f9;
  --tkw-neutral-200: #e2e8f0;
  --tkw-neutral-300: #cbd5e1;
  --tkw-neutral-400: #94a3b8;
  --tkw-neutral-500: #64748b;
  --tkw-neutral-600: #475569;
  --tkw-neutral-700: #334155;
  --tkw-neutral-800: #1e293b;
  --tkw-neutral-900: #0f172a;
  --tkw-neutral-950: #020617;

  /* ═══════════════ SURFACE TOKENS (light theme) ═══════════════ */
  --tkw-surface-page:          var(--tkw-neutral-0);
  --tkw-surface-muted:         var(--tkw-neutral-50);
  --tkw-surface-card:          var(--tkw-neutral-0);
  --tkw-surface-hover:         var(--tkw-neutral-100);
  --tkw-surface-border:        var(--tkw-neutral-200);
  --tkw-surface-border-strong: var(--tkw-neutral-300);

  /* ═══════════════ TEXT TOKENS (light theme) ═══════════════ */
  --tkw-text-primary:   var(--tkw-neutral-900);
  --tkw-text-secondary: var(--tkw-neutral-600);
  --tkw-text-tertiary:  var(--tkw-neutral-400);
  --tkw-text-disabled:  var(--tkw-neutral-300);
  --tkw-text-inverse:   var(--tkw-neutral-0);

  /* ═══════════════ SEMANTIC ═══════════════ */
  --tkw-success-ink:    #047857;
  --tkw-success-bg:     #ecfdf5;
  --tkw-success-border: #a7f3d0;
  --tkw-success-solid:  #10b981;

  --tkw-warning-ink:    #b45309;
  --tkw-warning-bg:     #fffbeb;
  --tkw-warning-border: #fde68a;
  --tkw-warning-solid:  #f59e0b;

  --tkw-error-ink:    #b91c1c;
  --tkw-error-bg:     #fef2f2;
  --tkw-error-border: #fecaca;
  --tkw-error-solid:  #ef4444;

  --tkw-info-ink:    #1d4ed8;
  --tkw-info-bg:     #eff6ff;
  --tkw-info-border: #bfdbfe;
  --tkw-info-solid:  #3b82f6;

  /* ═══════════════ TKAWEN PARENT BRAND ═══════════════ */
  --tkw-brand-ink:     #1d4ed8;
  --tkw-brand-back-1:  #3b82f6;
  --tkw-brand-back-2:  #1d4ed8;
  --tkw-brand-back-3:  #0c1a3d;
  --tkw-brand-front-1: #93c5fd;
  --tkw-brand-front-2: #60a5fa;
  --tkw-brand-front-3: #1e3a8a;

  /* ═══════════════ PRODUCT BRANDS ═══════════════ */
  /* Reference these in product code via var(--tkw-mystoq-ink) etc.   */
  --tkw-mystoq-ink:    #1d4ed8;  --tkw-mystoq-inverse:    #67e8f9;
  --tkw-liqaa-ink:     #7c3aed;  --tkw-liqaa-inverse:     #f9a8d4;
  --tkw-certify-ink:   #047857;  --tkw-certify-inverse:   #6ee7b7;
  --tkw-pharmapro-ink: #15803d;  --tkw-pharmapro-inverse: #86efac;
  --tkw-studio-ink:    #b45309;  --tkw-studio-inverse:    #fde68a;
  --tkw-voice-ink:     #86198f;  --tkw-voice-inverse:     #f5d0fe;
  --tkw-trust-ink:     #0284c7;  --tkw-trust-inverse:     #7dd3fc;
  --tkw-connect-ink:   #4338ca;  --tkw-connect-inverse:   #c7d2fe;
  --tkw-academy-ink:   #0284c7;  --tkw-academy-inverse:   #bae6fd;
  --tkw-id-ink:        #334155;  --tkw-id-inverse:        #e2e8f0;
}

/* ═══════════════ DARK THEME OVERRIDES ═══════════════ */
[data-theme="dark"], .dark {
  --tkw-surface-page:          var(--tkw-neutral-950);
  --tkw-surface-muted:         var(--tkw-neutral-900);
  --tkw-surface-card:          var(--tkw-neutral-800);
  --tkw-surface-hover:         var(--tkw-neutral-700);
  --tkw-surface-border:        rgba(255,255,255,0.08);
  --tkw-surface-border-strong: rgba(255,255,255,0.16);

  --tkw-text-primary:   var(--tkw-neutral-50);
  --tkw-text-secondary: var(--tkw-neutral-400);
  --tkw-text-tertiary:  var(--tkw-neutral-500);
  --tkw-text-disabled:  var(--tkw-neutral-700);
  --tkw-text-inverse:   var(--tkw-neutral-900);

  --tkw-success-bg:     rgba(16,185,129,0.12);
  --tkw-success-border: rgba(16,185,129,0.32);
  --tkw-warning-bg:     rgba(245,158,11,0.12);
  --tkw-warning-border: rgba(245,158,11,0.32);
  --tkw-error-bg:       rgba(239,68,68,0.12);
  --tkw-error-border:   rgba(239,68,68,0.32);
  --tkw-info-bg:        rgba(59,130,246,0.12);
  --tkw-info-border:    rgba(59,130,246,0.32);
}


/* ════════ typography.css ════════ */
/*
 * TKAWEN Brand · Typography tokens
 *
 * Two-script system:
 *   - Latin (Inter, variable, weights 100–900)
 *   - Arabic (Cairo, variable, weights 200–1000)
 * Both load from Google Fonts CDN. Self-host for production via fontsource if desired.
 *
 * Usage:
 *   1. Import this file in your root stylesheet.
 *   2. Apply class="tkw-font-display" / "tkw-font-body" / "tkw-font-mono" or use vars.
 */

/* ═══════════════ FONT IMPORTS ═══════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Cairo:wght@200..1000&family=JetBrains+Mono:wght@400..700&display=swap');

:root {
  /* ═══════════════ FONT FAMILIES ═══════════════ */
  /* Display: same stack used for marks/headlines on every TKAWEN surface.        */
  /* Browser picks Cairo when content is Arabic (system shaping rule),            */
  /* and Inter otherwise. unicode-range coverage handled by Google Fonts CSS.     */
  --tkw-font-display: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tkw-font-body:    'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tkw-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* ═══════════════ FONT WEIGHTS ═══════════════ */
  --tkw-fw-regular: 400;
  --tkw-fw-medium:  500;
  --tkw-fw-semi:    600;
  --tkw-fw-bold:    700;
  --tkw-fw-extra:   800;
  --tkw-fw-black:   900;

  /* ═══════════════ TYPE SCALE ═══════════════ */
  /* Modular scale 1.250 (major third) — works for Latin and Arabic.              */
  /* Line-heights tuned for Cairo's slightly taller cap height.                   */
  --tkw-text-xs:   0.75rem;   /* 12 */
  --tkw-text-sm:   0.875rem;  /* 14 */
  --tkw-text-base: 1rem;      /* 16 */
  --tkw-text-lg:   1.125rem;  /* 18 */
  --tkw-text-xl:   1.25rem;   /* 20 */
  --tkw-text-2xl:  1.5rem;    /* 24 */
  --tkw-text-3xl:  1.875rem;  /* 30 */
  --tkw-text-4xl:  2.25rem;   /* 36 */
  --tkw-text-5xl:  3rem;      /* 48 */
  --tkw-text-6xl:  3.75rem;   /* 60 */
  --tkw-text-7xl:  4.5rem;    /* 72 */

  /* ═══════════════ LINE HEIGHTS ═══════════════ */
  --tkw-lh-tight:    1.05;   /* display headlines */
  --tkw-lh-snug:     1.25;   /* short headings */
  --tkw-lh-normal:   1.5;    /* body */
  --tkw-lh-relaxed:  1.75;   /* long-form Arabic — Cairo benefits from extra leading */
  --tkw-lh-loose:    2;

  /* ═══════════════ LETTER SPACING ═══════════════ */
  /* Latin: tight tracking on display weights (Apple/Stripe convention).          */
  /* Arabic: NEVER use negative letter-spacing on Arabic — break ligatures.       */
  --tkw-tracking-tightest: -0.045em;  /* logos and large display only */
  --tkw-tracking-tight:    -0.025em;  /* headings */
  --tkw-tracking-normal:   0;
  --tkw-tracking-wide:     0.04em;
  --tkw-tracking-wider:    0.08em;
  --tkw-tracking-widest:   0.14em;    /* eyebrow labels, ALL-CAPS tags */
}

/* ═══════════════ UTILITY CLASSES ═══════════════ */

.tkw-font-display { font-family: var(--tkw-font-display); }
.tkw-font-body    { font-family: var(--tkw-font-body); }
.tkw-font-mono    { font-family: var(--tkw-font-mono); }

/* Document defaults — apply to body in every product app */
.tkw-prose {
  font-family: var(--tkw-font-body);
  font-weight: var(--tkw-fw-regular);
  font-size: var(--tkw-text-base);
  line-height: var(--tkw-lh-normal);
  color: var(--tkw-text-primary);
}

/* Arabic-specific document defaults — apply when dir="rtl" */
[dir="rtl"] .tkw-prose,
.tkw-prose[dir="rtl"] {
  font-family: 'Cairo', var(--tkw-font-body);
  line-height: var(--tkw-lh-relaxed);   /* Arabic needs more leading */
  letter-spacing: 0;                     /* Don't tighten Arabic */
}

/* Display headings — for hero copy across landings */
.tkw-display-1 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-7xl);
  font-weight: var(--tkw-fw-black);
  line-height: var(--tkw-lh-tight);
  letter-spacing: var(--tkw-tracking-tightest);
}
.tkw-display-2 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-5xl);
  font-weight: var(--tkw-fw-black);
  line-height: var(--tkw-lh-tight);
  letter-spacing: var(--tkw-tracking-tight);
}
.tkw-display-3 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-4xl);
  font-weight: var(--tkw-fw-extra);
  line-height: var(--tkw-lh-snug);
  letter-spacing: var(--tkw-tracking-tight);
}

/* Headings */
.tkw-h1 { font-size: var(--tkw-text-4xl); font-weight: var(--tkw-fw-black);  line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h2 { font-size: var(--tkw-text-3xl); font-weight: var(--tkw-fw-extra);  line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h3 { font-size: var(--tkw-text-2xl); font-weight: var(--tkw-fw-bold);   line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h4 { font-size: var(--tkw-text-xl);  font-weight: var(--tkw-fw-bold);   line-height: var(--tkw-lh-normal); }
.tkw-h5 { font-size: var(--tkw-text-lg);  font-weight: var(--tkw-fw-semi);   line-height: var(--tkw-lh-normal); }

/* Eyebrow / category label */
.tkw-eyebrow {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-xs);
  font-weight: var(--tkw-fw-extra);
  text-transform: uppercase;
  letter-spacing: var(--tkw-tracking-widest);
  color: var(--tkw-text-secondary);
}

/* Numerals — always tabular for tables/dashboards/dz-context (Western digits only per brand law) */
.tkw-num     { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.tkw-lat-num { unicode-bidi: bidi-override; direction: ltr; }


/* ════════ spacing.css ════════ */
/*
 * TKAWEN Brand · Spacing & layout tokens
 *
 * 4px base unit — every dimension across every TKAWEN product app must
 * snap to a multiple of 4. The scale below covers >99% of practical use.
 */

:root {
  /* ═══════════════ BASE UNIT ═══════════════ */
  --tkw-unit: 4px;          /* the atom */

  /* ═══════════════ SPACING SCALE ═══════════════ */
  /* Geometric pattern (×1, ×2, ×3, ×4, ×6, ×8, ×12, ×16, ×24, ×32)            */
  /* — small steps where micro-decisions happen, large steps for sections.    */
  --tkw-space-0:   0;
  --tkw-space-px:  1px;
  --tkw-space-0_5: 2px;
  --tkw-space-1:   4px;
  --tkw-space-2:   8px;
  --tkw-space-3:   12px;
  --tkw-space-4:   16px;
  --tkw-space-5:   20px;
  --tkw-space-6:   24px;
  --tkw-space-8:   32px;
  --tkw-space-10:  40px;
  --tkw-space-12:  48px;
  --tkw-space-16:  64px;
  --tkw-space-20:  80px;
  --tkw-space-24:  96px;
  --tkw-space-32:  128px;
  --tkw-space-40:  160px;
  --tkw-space-48:  192px;
  --tkw-space-56:  224px;
  --tkw-space-64:  256px;

  /* ═══════════════ RADIUS SCALE ═══════════════ */
  /* Mirror of mark's 25% corner ratio convention.                            */
  --tkw-radius-none: 0;
  --tkw-radius-xs:   2px;     /* tags, ticks */
  --tkw-radius-sm:   4px;     /* inputs, badges */
  --tkw-radius-md:   6px;     /* buttons */
  --tkw-radius-lg:   8px;     /* small cards */
  --tkw-radius-xl:   12px;    /* default cards */
  --tkw-radius-2xl:  16px;    /* dialogs */
  --tkw-radius-3xl:  24px;    /* heroes, sheet panels */
  --tkw-radius-4xl:  32px;    /* showcase tiles */
  --tkw-radius-full: 9999px;  /* pills, dots */

  /* ═══════════════ SHADOWS ═══════════════ */
  /* Layered slate-tinted shadows (NOT pure black — Apple convention).        */
  --tkw-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --tkw-shadow-sm: 0 2px 6px -2px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --tkw-shadow-md: 0 8px 16px -8px rgba(15,23,42,0.10), 0 2px 4px -1px rgba(15,23,42,0.06);
  --tkw-shadow-lg: 0 18px 32px -16px rgba(15,23,42,0.14), 0 4px 8px -2px rgba(15,23,42,0.06);
  --tkw-shadow-xl: 0 32px 64px -28px rgba(15,23,42,0.20), 0 8px 16px -4px rgba(15,23,42,0.06);
  --tkw-shadow-2xl: 0 48px 96px -32px rgba(15,23,42,0.32);

  /* Glow shadows (for primary actions, brand emphasis) */
  --tkw-shadow-glow-brand: 0 12px 28px -10px rgba(29,78,216,0.40);

  /* ═══════════════ Z-INDEX SCALE ═══════════════ */
  --tkw-z-base:     0;
  --tkw-z-raised:   10;
  --tkw-z-dropdown: 100;
  --tkw-z-sticky:   200;
  --tkw-z-fixed:    300;
  --tkw-z-modal:    400;
  --tkw-z-popover:  500;
  --tkw-z-toast:    600;
  --tkw-z-max:      999;

  /* ═══════════════ CONTAINER WIDTHS ═══════════════ */
  --tkw-container-prose: 65ch;     /* legible reading line length */
  --tkw-container-sm:    640px;
  --tkw-container-md:    768px;
  --tkw-container-lg:    1024px;
  --tkw-container-xl:    1280px;
  --tkw-container-2xl:   1440px;

  /* ═══════════════ MOTION ═══════════════ */
  --tkw-duration-instant: 75ms;
  --tkw-duration-fast:    150ms;
  --tkw-duration-normal:  250ms;
  --tkw-duration-slow:    400ms;
  --tkw-duration-slower:  600ms;

  --tkw-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* enter — strong start, soft end */
  --tkw-ease-in:     cubic-bezier(0.55, 0, 0.78, 0);     /* exit — soft start, strong end */
  --tkw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* both */
  --tkw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy, for delight */
}


/* ════════ icons.css ════════ */
/*
 * TKAWEN Brand · Icon utilities (companion to icons/README.md)
 * Drop into any product to enforce icon house-style.
 */

.tkw-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  vertical-align: middle;
}

.tkw-icon-sm  { width: 16px; height: 16px; stroke-width: 2; }
.tkw-icon-md  { width: 20px; height: 20px; stroke-width: 1.85; }
.tkw-icon-lg  { width: 24px; height: 24px; stroke-width: 1.75; }
.tkw-icon-xl  { width: 32px; height: 32px; stroke-width: 1.5; }
.tkw-icon-2xl { width: 48px; height: 48px; stroke-width: 1.25; }

/* Subtle accent ring around an icon — used for feature cards */
.tkw-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tkw-radius-lg, 8px);
  background: var(--tkw-info-bg, #eff6ff);
  color: var(--tkw-info-ink, #1d4ed8);
}
.tkw-icon-chip.success { background: var(--tkw-success-bg); color: var(--tkw-success-ink); }
.tkw-icon-chip.warning { background: var(--tkw-warning-bg); color: var(--tkw-warning-ink); }
.tkw-icon-chip.error   { background: var(--tkw-error-bg);   color: var(--tkw-error-ink); }