/* Kuwait Archive — Design Tokens
   RTL-First Design System
   archive.7eyak.com */

:root {
  /* ── Colors: Primary & Accent ── */
  --color-primary:       #1a3a5c;
  --color-accent:        #1a5276;
  --color-accent-hover:  #154360;

  /* ── Colors: Backgrounds ── */
  --color-bg-page:       #fafaf8;
  --color-bg-surface:    #ffffff;
  --color-bg-subtle:     #f0f7ff;

  /* ── Colors: Text ── */
  --color-text-primary:  #1a1a1a;
  --color-text-muted:    #666660;
  --color-text-inverse:  #ffffff;

  /* ── Colors: Borders ── */
  --color-border-subtle: #e5e5e0;
  --color-border-strong: #cccccc;

  /* ── Colors: Semantic ── */
  --color-success-text:  #1a5c2a;
  --color-success-bg:    #eaf5ec;
  --color-danger-text:   #7b1a1a;
  --color-danger-bg:     #fdf0f0;
  --color-warning-text:  #8a6d3b;
  --color-warning-bg:    #fcf8e3;
  --color-neutral-text:  #666660;
  --color-neutral-bg:    #e5e5e0;

  /* ── Typography: Fonts ── */
  --font-arabic: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  --font-latin:  'IBM Plex Sans', 'Inter', sans-serif;

  /* ── Typography: Sizes ── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  /* ── Typography: Weights ── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Typography: Line Heights ── */
  --leading-tight:   1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-subtle:  0 1px 3px rgba(0,0,0,0.05);
  --shadow-hover:   0 4px 6px rgba(0,0,0,0.08);
  --shadow-elevated: 0 10px 15px rgba(0,0,0,0.1);

  /* ── Legacy aliases (backward compat) ── */
  --color-bg:        var(--color-bg-page);
  --color-surface:   var(--color-bg-surface);
  --color-border:    var(--color-border-subtle);
  --color-text:      var(--color-text-primary);
  --accent:          var(--color-accent);
  --bg-subtle:       var(--color-bg-subtle);
  --text-secondary:  var(--color-text-muted);
  --border:          var(--color-border-subtle);
  --border-subtle:   var(--color-border-subtle);
  --bg-primary:      var(--color-bg-surface);
  --text-primary:    var(--color-text-primary);
  --font-ar:         var(--font-arabic);
  --font-en:         var(--font-latin);
  --radius:          var(--radius-md);
  --color-won:       var(--color-success-text);
  --color-lost:      var(--color-danger-text);
  --color-bg-won:    var(--color-success-bg);
  --color-bg-lost:   var(--color-danger-bg);

  /* ── Layout ── */
  --max-width: 960px;
}

/* ── Global Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { direction: rtl; font-size: var(--text-base); }

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-arabic);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* ── Numbers + tickers: Latin font ── */
.number, .ticker-text, .price-number, .stat-number {
  font-family: var(--font-latin);
  direction: ltr;
  display: inline-block;
}

/* ── Links ── */
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* ── Headings ── */
h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-normal); }

/* ── Utility ── */
.text-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
time { color: var(--color-text-muted); font-size: 0.9em; font-family: var(--font-latin); }