/* =========================================================
   Arabian Oasys — Colors & Type
   "Sustainability ... in Depth" — sleek, glass, luxurious
   ========================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "AlfontCO Headline";
  src: url("./fonts/ALFONT_CO_Headline_Regular.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Input Mono Compressed";
  src: url("./fonts/InputMonoCompressed-Light.ttf") format("truetype");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sultan Musnad";
  src: url("./fonts/SultanMusnad-Tifinagh.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap");

/* =========================================================
   COLOR TOKENS
   ========================================================= */
:root {
  /* ---- Ink (deep dark spine) — from logo rgb(32,33,48) ---- */
  --ink-950: #06080C;        /* deepest, true page void */
  --ink-900: #0A0E14;        /* default canvas dark */
  --ink-800: #11161F;        /* elevated dark surface */
  --ink-700: #181E2A;        /* card glass base (dark) */
  --ink-600: #202130;        /* BRAND INK — logo primary */
  --ink-500: #2A2E40;
  --ink-400: #3A4054;
  --ink-300: #555B70;
  --ink-200: #8088A0;
  --ink-100: #B6BDD0;

  /* ---- Sand (warm neutrals — desert/oasis ground) ---- */
  --sand-50:  #FDFDFD;        /* BRAND OFF-WHITE — logo light */
  --sand-100: #F8F4ED;
  --sand-200: #EFE7D7;
  --sand-300: #E3D6BD;
  --sand-400: #C9B891;
  --sand-500: #A89570;
  --sand-600: #806F50;
  --sand-700: #5C4F38;
  --sand-800: #3C3322;

  /* ---- Oasis (green — life, vegetation, Saudi flag ref) ---- */
  --oasis-100: #DCFCE7;
  --oasis-300: #6FE3A7;       /* glow accent on dark */
  --oasis-400: #34C77F;
  --oasis-500: #16A75E;       /* PRIMARY ACCENT */
  --oasis-600: #0F8048;
  --oasis-700: #0A5A33;
  --oasis-900: #042818;       /* from logo accent rgb(0,66,8) */

  /* ---- Date (amber/gold — fruit, sunlight, luxury) ---- */
  --date-200: #FCE7B6;
  --date-300: #F5C97A;
  --date-400: #E8A85B;        /* SECONDARY ACCENT */
  --date-500: #C98640;
  --date-700: #7A4E1F;

  /* ---- Water (blue — rainwater, sky) ---- */
  --water-300: #7CC3F0;
  --water-500: #3D8DC4;
  --water-700: #1B4F7A;
  --water-900: #002E54;       /* from logo accent rgb(0,46,84) */

  /* ---- Ember (red — flag accent, alerts) ---- */
  --ember-400: #E2685C;
  --ember-500: #C8102E;
  --ember-900: #5B0000;       /* from logo accent rgb(91,0,0) */

  /* =========================================================
     SEMANTIC TOKENS (default = dark theme)
     ========================================================= */

  /* surfaces */
  --bg-canvas:    var(--ink-950);
  --bg-page:      var(--ink-900);
  --bg-elevated:  var(--ink-800);
  --bg-card:      rgba(24, 30, 42, 0.62);       /* glass: dark + alpha */
  --bg-card-hi:   rgba(36, 42, 56, 0.70);
  --bg-glass:     rgba(255, 255, 255, 0.04);    /* faint frosted */
  --bg-glass-hi:  rgba(255, 255, 255, 0.08);
  --bg-overlay:   rgba(6, 8, 12, 0.72);
  --bg-inverse:   var(--sand-50);

  /* foreground */
  --fg:           var(--sand-50);
  --fg-strong:    #FFFFFF;
  --fg-muted:     rgba(253, 253, 253, 0.72);
  --fg-subtle:    rgba(253, 253, 253, 0.48);
  --fg-faint:     rgba(253, 253, 253, 0.24);
  --fg-inverse:   var(--ink-600);

  /* borders / hairlines */
  --border-faint:   rgba(255, 255, 255, 0.06);
  --border-soft:    rgba(255, 255, 255, 0.10);
  --border-medium:  rgba(255, 255, 255, 0.16);
  --border-strong:  rgba(255, 255, 255, 0.28);
  --border-accent:  var(--oasis-500);

  /* accent */
  --accent:         var(--oasis-500);
  --accent-hover:   var(--oasis-400);
  --accent-quiet:   rgba(22, 167, 94, 0.14);
  --accent-glow:    rgba(111, 227, 167, 0.32);
  --accent-2:       var(--date-400);
  --accent-2-glow:  rgba(232, 168, 91, 0.30);

  /* status */
  --status-success: var(--oasis-500);
  --status-warn:    var(--date-400);
  --status-danger:  var(--ember-500);
  --status-info:    var(--water-500);

  /* =========================================================
     ELEVATION + SHADOW + RADIUS + SPACING
     ========================================================= */

  /* radii (round, soft, generous — luxury) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* shadows — soft luminous "floating" feel */
  --shadow-1:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.40);
  --shadow-2:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 18px -6px rgba(0,0,0,0.60),
    0 2px 6px rgba(0,0,0,0.30);
  --shadow-3:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 18px 40px -12px rgba(0,0,0,0.65),
    0 8px 20px -8px rgba(0,0,0,0.45);
  --shadow-4:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 80px -20px rgba(0,0,0,0.75),
    0 14px 40px -12px rgba(0,0,0,0.55);
  --shadow-glow:
    0 0 0 1px rgba(22,167,94,0.30),
    0 8px 28px -6px rgba(22,167,94,0.45),
    0 0 60px -10px rgba(111,227,167,0.40);
  --shadow-glow-date:
    0 0 0 1px rgba(232,168,91,0.30),
    0 8px 28px -6px rgba(232,168,91,0.40),
    0 0 60px -10px rgba(245,201,122,0.30);

  /* blurs */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: "AlfontCO Headline", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic:  "AlfontCO Headline", "Noto Naskh Arabic", "Amiri", serif;
  --font-tifinagh:"Sultan Musnad", "AlfontCO Headline", sans-serif;
  --font-mono:    "Input Mono Compressed", ui-monospace, "SFMono-Regular", monospace;

  /* type scale (1.250 perfect-fourth-ish) */
  --t-display-xl: clamp(56px, 8vw, 112px);
  --t-display:    clamp(40px, 5vw, 72px);
  --t-h1:         clamp(32px, 4vw, 52px);
  --t-h2:         clamp(26px, 3vw, 38px);
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body-lg:    18px;
  --t-body:       15px;
  --t-body-sm:    13px;
  --t-caption:    12px;
  --t-overline:   11px;

  --lh-tight:  1.05;
  --lh-snug:   1.20;
  --lh-normal: 1.45;
  --lh-relax:  1.65;
  --lh-arabic: 1.85;

  --ls-tight: -0.02em;
  --ls-norm:   0em;
  --ls-wide:   0.04em;
  --ls-caps:   0.14em;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;
}

/* =========================================================
   LIGHT THEME OVERRIDE (when .theme-light on root)
   ========================================================= */
.theme-light {
  --bg-canvas:    var(--sand-50);
  --bg-page:      #FAF7F0;
  --bg-elevated:  #FFFFFF;
  --bg-card:      rgba(255,255,255,0.72);
  --bg-card-hi:   rgba(255,255,255,0.92);
  --bg-glass:     rgba(32,33,48,0.04);
  --bg-glass-hi:  rgba(32,33,48,0.08);
  --bg-overlay:   rgba(253,253,253,0.72);
  --bg-inverse:   var(--ink-600);

  --fg:           var(--ink-600);
  --fg-strong:    var(--ink-950);
  --fg-muted:     rgba(32,33,48,0.72);
  --fg-subtle:    rgba(32,33,48,0.52);
  --fg-faint:     rgba(32,33,48,0.20);
  --fg-inverse:   var(--sand-50);

  --border-faint:   rgba(32,33,48,0.06);
  --border-soft:    rgba(32,33,48,0.10);
  --border-medium:  rgba(32,33,48,0.16);
  --border-strong:  rgba(32,33,48,0.28);
}

/* =========================================================
   ELEMENT DEFAULTS / SEMANTIC HELPERS
   ========================================================= */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg-page); }
[dir="rtl"], .lang-ar { font-family: var(--font-arabic); line-height: var(--lh-arabic); }

.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 400; }
.display    { font-family: var(--font-display); font-size: var(--t-display);    line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 400; }
h1, .h1     { font-family: var(--font-display); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: 500; margin: 0; }
h2, .h2     { font-family: var(--font-sans);    font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: 600; margin: 0; }
h3, .h3     { font-family: var(--font-sans);    font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: 600; margin: 0; }
h4, .h4     { font-family: var(--font-sans);    font-size: var(--t-h4); line-height: var(--lh-snug); font-weight: 600; margin: 0; }
p,  .p      { font-family: var(--font-sans);    font-size: var(--t-body); line-height: var(--lh-relax); color: var(--fg-muted); margin: 0; }
.body-lg    { font-size: var(--t-body-lg); line-height: var(--lh-relax); color: var(--fg-muted); }
.caption    { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }
.overline   { font-size: var(--t-overline); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-subtle); font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: 13px; }

/* =========================================================
   GLASS UTILITY
   ========================================================= */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur-md)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}
.glass-hi {
  background: var(--bg-card-hi);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
}