/* ============================================================
   DWTC Design System — globals.css
   Master import. Load this single file in your app.
   Order matters: colors → spacing/type → themes → shadows
   ============================================================ */

/* ── 1. Brand Color Primitives ───────────────────────────── */
@import "./tokens/colors.css?v=mod-2026-06-02";

/* ── 2. Typography ───────────────────────────────────────── */
@import "./tokens/typography.css?v=mod-2026-05-14";

/* ── 3. Spacing, Radius, Breakpoints ─────────────────────── */
@import "./tokens/spacing.css?v=mod-2026-05-14";

/* ── 4. Themes (semantic tokens, light is :root default) ─── */
@import "./tokens/themes/light.css?v=mod-2026-06-02";
@import "./tokens/themes/dark.css?v=mod-2026-05-14";
@import "./tokens/themes/oled.css?v=mod-2026-05-14";

/* ── 5. Shadows (theme-aware, must come after themes) ─────── */
@import "./tokens/shadows.css";

/* ============================================================
   Google Fonts — Free/Open-Source (SIL Open Font License)
   Replaces commercial DIN Pro, GE SS Two, GE Awtar.
   ============================================================ */

/* Barlow — closest free match to DIN Pro (retained for brand/print materials) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,700&display=swap');

/* Outfit — portal display / headings (Tier 1 typography refresh) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* Plus Jakarta Sans — portal UI body (Tier 1 typography refresh) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* JetBrains Mono — numerics, code, timestamps (Tier 1 typography refresh) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Tajawal — closest free match to GE SS Two (Arabic body) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* Cairo — closest free match to GE Awtar (Arabic display) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Libre Baskerville — English editorial (already free) */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Self-hosted fallback @font-face (optional) ──────────── */
/* Uncomment and point paths to downloaded files in brand-kit/fonts/ */
/*
@font-face {
  font-family: 'Barlow';
  src: url('./brand-kit/fonts/barlow/Barlow-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./brand-kit/fonts/tajawal/Tajawal-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('./brand-kit/fonts/cairo/Cairo-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

/* ============================================================
   Base Reset & Defaults
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  color: var(--text-body);
  background-color: var(--bg-page);
  /* Modern type rendering — explicit declarations document intent and
     guarantee parity across Chromium / WebKit / Gecko. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

/* ── Typographic Elements ────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h2);
}

h1 { font: var(--text-h1); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
h2 { font: var(--text-h2); color: var(--text-primary); letter-spacing: var(--tracking-snug); }
h3 { font: var(--text-h3); color: var(--text-primary); letter-spacing: var(--tracking-snug); }

p {
  font: var(--text-body);
  color: var(--text-body);
}

a {
  color: var(--link-color, var(--text-link));
  font-weight: var(--link-weight, 500);
  text-decoration: none;
  transition: var(--link-transition-base);
}

a:hover {
  color: var(--link-hover-color, var(--link-color, var(--text-link)));
  opacity: var(--link-hover-opacity);
}

a:active {
  color: var(--link-active-color, var(--link-color, var(--text-link)));
}

a:focus-visible {
  outline: var(--focus-ring-offset) solid var(--link-color, var(--text-link));
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
  box-shadow: none;
}

/* ── Form Elements Reset ─────────────────────────────────── */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

button:disabled {
  cursor: not-allowed;
}

input,
select,
textarea {
  color: var(--input-text);
  background-color: var(--input-bg);
  border: var(--border-width-thin) solid var(--input-border);
  border-radius: var(--radius-xs);
  padding: var(--spacing-input-y) var(--spacing-input-x);
  outline: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

/* iOS Safari auto-zooms when an input's font-size is <16px and the user taps
   it. The fix is to size form controls at ≥16px on small viewports — but only
   on small viewports, so desktop density stays intact. */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: max(var(--text-size-input-mobile-min), var(--text-size-body));
  }
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-hover);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-input-focus);
}

/* Native checkbox/radio accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--btn-primary-bg);
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

/* ── Lists ───────────────────────────────────────────────── */

ul, ol {
  list-style: none;
}

/* ── Images & Media ──────────────────────────────────────── */

img, svg, video {
  display: block;
  max-width: 100%;
}

/* ── Focus Visible (global) ──────────────────────────────── */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Scrollbar (webkit — optional) ──────────────────────── */

::-webkit-scrollbar {
  width: var(--size-scrollbar-width);
  height: var(--size-scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ── Reduced Motion ──────────────────────────────────────── */

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

/* ── RTL Support ─────────────────────────────────────────── */

[dir="rtl"] {
  text-align: start;
}

/* ── Utility: Theme Transition ───────────────────────────── */

/* Add class to <html> before switching [data-theme] to prevent flash */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color var(--duration-slow) ease,
    color var(--duration-normal) ease,
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease !important;
}