/* ═══════════════════════════════════════════════════════════════════
   TIK Mail — tokens.css
   مولَّد من TIK Design System tokens/ — لا يُحرَّر يدويًا هنا؛
   عدّل في نظام التصميم ثم أعد التوليد.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens/colors.css ── */
/* TIK color system.
   Restrained corporate palette: blue, white, light gray, dark gray, near-black.
   The multicolor logo gradient is a BRAND ASSET only (--brand-logo-*) and must
   never be used as a UI or presentation color. */
:root {
  /* Blue ramp — primary. Anchored on the site theme color #0070F3
     and the presentation accent #4A7CF6. */
  --blue-50: #eff5ff;
  --blue-100: #dbe8ff;
  --blue-200: #bcd4ff;
  --blue-300: #8db6ff;
  --blue-400: #4a7cf6;
  --blue-500: #0070f3;
  --blue-600: #005ad1;
  --blue-700: #0047a6;
  --blue-800: #033a80;
  --blue-900: #072f63;

  /* Neutral ramp — cool, near-black terminates in navy-black. */
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fa;
  --neutral-100: #eef0f4;
  --neutral-200: #e2e6ec;
  --neutral-300: #cbd1da;
  --neutral-400: #a4acba;
  --neutral-500: #7b8494;
  --neutral-600: #5a6372;
  --neutral-700: #3d4553;
  --neutral-800: #262d3c;
  --neutral-900: #151c2e;
  --neutral-950: #0b1020;

  /* Semantic status — muted, corporate. No red-as-brand, no magenta, no purple. */
  --success-500: #128a5b;
  --success-100: #dcf3e8;
  --warning-500: #a86612;
  --warning-100: #fbeed6;
  --danger-500: #b3341f;
  --danger-100: #fbe4de;
  --info-500: var(--blue-500);
  --info-100: var(--blue-50);

  /* Data visualization — ordered sequence used in charts and decks.
     Blue first, then near-black, then the gray steps. */
  --data-1: var(--blue-400);
  --data-2: var(--neutral-900);
  --data-3: #808895;
  --data-4: #c6cad2;
  --data-5: var(--blue-700);
  --data-6: var(--neutral-500);

  /* Brand asset colors — logo gradient stops. Reference only. */
  --brand-logo-start: #3c91ce;
  --brand-logo-mid: #995ba5;
  --brand-logo-end: #da3046;

  /* ---- Semantic aliases: use these in components ---- */
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-accent: var(--blue-500);
  --text-on-accent: var(--neutral-0);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  --surface-page: var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-inverse-soft: var(--neutral-800);
  --surface-accent: var(--blue-500);
  --surface-accent-soft: var(--blue-50);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-accent: var(--blue-500);
  --border-inverse: rgba(255, 255, 255, 0.14);

  --focus-ring: var(--blue-400);
}

/* Dark surface scope — for inverted sections, footers, dark slides. */
.tik-dark {
  --text-strong: var(--neutral-0);
  --text-body: #c3c9d5;
  --text-muted: #8e97a7;
  --text-faint: #6d7686;
  --text-accent: var(--blue-300);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);
  --surface-page: var(--neutral-950);
  --surface-subtle: var(--neutral-900);
  --surface-card: var(--neutral-800);
  --surface-sunken: #0f1526;
  --surface-inverse: var(--neutral-0);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
}

/* ── tokens/typography.css ── */
/* TIK type scale. Arabic-first: line-heights are generous because Arabic
   ascenders/descenders and diacritics need vertical room. */
:root {
  --text-display-1: 64px;
  --text-display-2: 52px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 13px;
  --text-eyebrow: 12px;

  --leading-display: 1.15;
  --leading-heading: 1.28;
  --leading-body: 1.75;
  --leading-tight: 1.4;

  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Latin display type is tracked in slightly; Arabic never gets negative
     tracking (it breaks joins) — only Latin/numeric runs do. */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;

  /* Semantic roles */
  --font-hero: var(--weight-semibold) var(--text-display-1) / var(--leading-display) var(--font-display);
  --font-section-title: var(--weight-semibold) var(--text-h2) / var(--leading-heading) var(--font-display);
  --font-card-title: var(--weight-semibold) var(--text-h4) / var(--leading-tight) var(--font-sans);
  --font-body: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-sans);
  --font-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-sans);
  --font-ui: var(--weight-medium) var(--text-sm) / 1.4 var(--font-sans);
  --font-figure: var(--weight-semibold) var(--text-h2) / 1.1 var(--font-mono);
}

/* ── tokens/spacing.css ── */
/* 4px base grid. TIK layouts are white-space heavy: section rhythm starts at
   --space-16 (96px) and goes up, never below. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --gutter: var(--space-6);
  --container-max: 1200px;
  --container-narrow: 760px;
  --section-y: var(--space-32);
  --section-y-compact: var(--space-24);
  --card-pad: var(--space-8);
  --control-pad-x: var(--space-5);
  --grid-columns: 12; /* @kind other */
}

/* ── tokens/radius.css ── */
/* Corner radii: small and consistent. Nothing pill-shaped except tags/status
   dots — soft blobs read startup-like, which this brand is not. */
:root {
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --radius-badge: var(--radius-xs);
  --radius-avatar: var(--radius-pill);

  --border-width: 1px;
  --border-width-strong: 2px;
  --rule-accent-width: 3px; /* the vertical blue rule beside slide titles */
}

/* ── tokens/elevation.css ── */
/* Elevation: borders do most of the work; shadows are low, cool and diffuse.
   No colored glows, no double shadows. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(21, 28, 46, 0.05);
  --shadow-sm: 0 1px 3px rgba(21, 28, 46, 0.06), 0 1px 2px rgba(21, 28, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(21, 28, 46, 0.07);
  --shadow-lg: 0 12px 32px rgba(21, 28, 46, 0.10);
  --shadow-xl: 0 24px 64px rgba(21, 28, 46, 0.14);
  --shadow-inset-hairline: inset 0 -1px 0 rgba(21, 28, 46, 0.06);

  --shadow-card: var(--shadow-none);
  --shadow-card-hover: var(--shadow-md);
  --shadow-panel: var(--shadow-lg);
  --shadow-dialog: var(--shadow-xl);
  --ring-focus: 0 0 0 3px rgba(0, 112, 243, 0.22);

  /* Subtle geometric background washes — the only permitted decoration. */
  --grid-line: rgba(21, 28, 46, 0.05);
  --pattern-grid: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* @kind other */
  --pattern-grid-size: 64px 64px; /* @kind other */
  --scrim-inverse: linear-gradient(180deg, rgba(11, 16, 32, 0) 0%, rgba(11, 16, 32, 0.72) 100%); /* @kind other */
}

/* ── tokens/motion.css ── */
/* Motion: short, flat, functional. Fades and 2–6px translations only.
   No bounce, no spring, no scale-in-from-zero. */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --duration-instant: 80ms; /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-normal: 220ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
  --duration-reveal: 560ms; /* @kind other */

  --transition-control: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-card: box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard); /* @kind other */
  --lift-hover: translateY(-2px); /* @kind other */
  --press-scale: 0.99; /* @kind other */
}

/* ── جسر Roundcube: elastic يفعّل الداكن بصنف html.dark-mode لا .tik-dark ── */
html.dark-mode {
  --text-strong: var(--neutral-0);
  --text-body: #c3c9d5;
  --text-muted: #8e97a7;
  --text-faint: #6d7686;
  --text-accent: var(--blue-300);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);
  --surface-page: var(--neutral-950);
  --surface-subtle: var(--neutral-900);
  --surface-card: var(--neutral-800);
  --surface-sunken: #0f1526;
  --surface-inverse: var(--neutral-0);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
}

/* ── أسماء دلالية خاصة بالبريد (نقطة الربط الوحيدة لبقية الطبقات) ── */
:root, html.dark-mode {
  --mail-accent:          var(--blue-500);
  --mail-accent-hover:    var(--blue-600);
  --mail-accent-soft:     var(--blue-50);
  --mail-selected-bg:     var(--blue-50);
  --mail-selected-fg:     var(--blue-700);
  --mail-chrome:          var(--surface-page);
  --mail-rail:            var(--surface-subtle);
  --mail-line:            var(--border-default);
  --mail-line-soft:       var(--border-subtle);
  --mail-unread-weight:   var(--weight-semibold);
}
html.dark-mode {
  --mail-accent-soft:     rgba(74, 124, 246, 0.16);
  --mail-selected-bg:     rgba(74, 124, 246, 0.20);
  --mail-selected-fg:     var(--blue-200);
}