/* ===================================================================
   ManasikOS — Design Tokens
   The single source of truth for the visual system.
   Premium · Spiritual · Calm · Trustworthy · Saudi-tech.
   =================================================================== */

:root {
  /* ---- Brand primitives ---------------------------------------- */
  --green-950: #042A21;   /* deepest — overlays, pressed */
  --green-900: #063B2E;   /* Dark Green — authority canvas */
  --green-800: #0B5A42;   /* Emerald — surfaces on dark */
  --green-700: #0E6B4F;   /* hover / borders on dark */
  --green-600: #1F7A4D;   /* Success green */

  --gold-700:  #A6822F;   /* pressed gold */
  --gold-600:  #B8923E;
  --gold-500:  #C8A24A;   /* Gold — primary highlight */
  --gold-400:  #D8B65E;
  --gold-300:  #E2C878;   /* Light Gold */
  --gold-200:  #EFE0BC;   /* gold wash */

  --ink-950:   #0B0B0B;   /* Black */
  --ink-800:   #1A1A18;
  --ink-600:   #3A3A36;
  --ink-400:   #6B6B63;

  --ivory-50:  #FBF8F1;
  --ivory-100: #F6F1E7;   /* Ivory — reading background */
  --ivory-200: #EDE6D6;
  --ivory-300: #E4DCCB;   /* subtle borders on ivory */
  --ivory-400: #D6CCB5;
  --white:     #FFFFFF;

  --red-600:   #B42318;   /* Danger */
  --red-500:   #D14439;
  --red-100:   #F7E4E2;
  --amber-600: #D89B22;   /* Warning gold */
  --amber-100: #F8ECD3;
  --green-tint-100: #E3F0E9;

  /* ---- Semantic roles ------------------------------------------ */
  --bg-app:            var(--ivory-100);
  --bg-app-alt:        var(--ivory-50);
  --bg-canvas-dark:    var(--green-900);
  --bg-canvas-darker:  var(--green-950);
  --bg-surface:        var(--white);
  --bg-surface-dark:   var(--green-800);
  --bg-inverse:        var(--ink-950);

  --text-primary:      var(--ink-950);
  --text-secondary:    var(--ink-600);
  --text-muted:        var(--ink-400);
  --text-on-dark:      var(--ivory-100);
  --text-on-dark-muted:#BFB9A8;
  --text-gold:         var(--gold-500);

  --border-subtle:     var(--ivory-300);
  --border-strong:     var(--ivory-400);
  --border-dark:       var(--green-700);
  --border-gold:       var(--gold-500);

  --accent-gold:       var(--gold-500);
  --accent-gold-soft:  var(--gold-300);

  --status-danger:     var(--red-600);
  --status-danger-bg:  var(--red-100);
  --status-success:    var(--green-600);
  --status-success-bg: var(--green-tint-100);
  --status-warning:    var(--amber-600);
  --status-warning-bg: var(--amber-100);

  /* Map pin system */
  --pin-normal:    var(--green-600);
  --pin-attention: var(--amber-600);
  --pin-sos:       var(--red-600);
  --pin-beacon:    var(--gold-500);

  /* ---- Spacing scale (8pt based) ------------------------------- */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- Radius -------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Shadows (premium, low-saturation) ----------------------- */
  --shadow-soft:   0 4px 16px rgba(6, 59, 46, 0.08);
  --shadow-card:   0 8px 24px rgba(6, 59, 46, 0.10);
  --shadow-lifted: 0 16px 40px rgba(11, 11, 11, 0.16);
  --shadow-gold:   0 8px 28px rgba(200, 162, 74, 0.32);
  --shadow-sos:    0 10px 34px rgba(180, 35, 24, 0.38);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Typography ---------------------------------------------- */
  --font-display: "Tajawal", "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-text:    "Tajawal", "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-latin:   "Inter", "Tajawal", system-ui, sans-serif;

  /* Type ramp — size / line-height / weight */
  --t-hero-size: 44px;   --t-hero-lh: 52px;   --t-hero-w: 900;
  --t-display-size: 34px;--t-display-lh: 42px;--t-display-w: 800;
  --t-h1-size: 28px;     --t-h1-lh: 36px;     --t-h1-w: 700;
  --t-h2-size: 22px;     --t-h2-lh: 30px;     --t-h2-w: 700;
  --t-h3-size: 18px;     --t-h3-lh: 26px;     --t-h3-w: 700;
  --t-body-lg-size: 20px;--t-body-lg-lh: 32px;--t-body-lg-w: 500;
  --t-body-size: 18px;   --t-body-lh: 30px;   --t-body-w: 400;
  --t-body-sm-size: 16px;--t-body-sm-lh: 26px;--t-body-sm-w: 400;
  --t-label-size: 19px;  --t-label-lh: 24px;  --t-label-w: 700;
  --t-strong-size: 16px; --t-strong-lh: 22px; --t-strong-w: 700;
  --t-caption-size: 14px;--t-caption-lh: 20px;--t-caption-w: 500;
  --t-overline-size: 12px;--t-overline-lh: 16px;--t-overline-w: 700;
  --t-num-xl-size: 40px; --t-num-xl-lh: 44px; --t-num-xl-w: 800;
  --t-num-l-size: 28px;  --t-num-l-lh: 32px;  --t-num-l-w: 700;

  /* ---- Motion -------------------------------------------------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Phone frame */
  --phone-w: 393px;
  --phone-h: 852px;
}