/* ==========================================================================
   Altiora Tech — Design Tokens
   الألوان والخطوط والمسافات. الوضع الداكن هو الأساس، والفاتح عبر [data-theme="light"]
   ========================================================================== */

/* ---------- Font: Cairo (local variable font, weights 400–800, swap) ---------- */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: Dark (default) ---------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --c-bg: #060a18;
  --c-bg-2: #080d20;
  --c-surface: #0c1228;
  --c-elevated: #131b3a;
  --c-border: rgba(148, 163, 255, 0.12);
  --c-border-strong: rgba(148, 163, 255, 0.24);
  --c-glass: rgba(12, 18, 40, 0.62);

  /* Text */
  --c-text: #eaeefb;
  --c-muted: #98a2c3;
  --c-faint: #8089a8;

  /* Brand */
  --c-accent: #4d7cff;
  --c-accent-2: #8b5cf6;
  --c-spark: #2ee6d6;
  --c-accent-rgb: 77, 124, 255;
  --c-accent-2-rgb: 139, 92, 246;
  --c-spark-rgb: 46, 230, 214;
  --c-on-accent: #ffffff;

  /* Feedback */
  --c-success: #22c55e;
  --c-danger: #f87171;
  --c-warning: #fbbf24;

  /* Gradients — always ascending (to top) */
  --g-ascent: linear-gradient(to top, #8b5cf6 0%, #4d7cff 55%, #2ee6d6 100%);
  --g-ascent-x: linear-gradient(90deg, #2ee6d6 0%, #4d7cff 45%, #8b5cf6 100%);
  --g-button: linear-gradient(135deg, #5b87ff 0%, #4d7cff 40%, #7a5cf6 100%);
  --g-text: linear-gradient(to top, #8b5cf6 10%, #4d7cff 55%, #58e8ff 100%);
  --g-card: linear-gradient(to top, rgba(19, 27, 58, 0.9), rgba(12, 18, 40, 0.6));

  /* Grid pattern + glow */
  --grid-line: rgba(148, 163, 255, 0.055);
  --glow-accent: 0 0 0 1px rgba(77, 124, 255, 0.35), 0 12px 40px -8px rgba(77, 124, 255, 0.45);
  --glow-soft: 0 20px 60px -20px rgba(77, 124, 255, 0.35);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, 0.65);

  /* Typography */
  --ff-display: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --ff-body: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 5.2vw, 5.5rem);

  --lh-tight: 1.25;
  --lh-snug: 1.5;
  --lh-body: 1.85;

  /* Spacing (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 76px;

  /* Radius — the signature "ascent" cut uses --cut */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --cut: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  /* Layers */
  --z-base: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-float: 300;
  --z-modal: 400;
  --z-transition: 900;
  --z-loader: 1000;
  --z-cursor: 1100;
}

/* ---------- Tokens: Light ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg: #f5f7fc;
  --c-bg-2: #eef1f9;
  --c-surface: #ffffff;
  --c-elevated: #eef1f9;
  --c-border: rgba(15, 23, 60, 0.1);
  --c-border-strong: rgba(15, 23, 60, 0.2);
  --c-glass: rgba(255, 255, 255, 0.72);

  --c-text: #0a1029;
  --c-muted: #4f5877;
  --c-faint: #5f6886;

  --c-accent: #3358f4;
  --c-accent-2: #7445e8;
  --c-spark: #0b9e93;
  --c-accent-rgb: 51, 88, 244;
  --c-accent-2-rgb: 116, 69, 232;
  --c-spark-rgb: 11, 158, 147;

  --c-success: #15803d;
  --c-danger: #dc2626;

  --g-text: linear-gradient(to top, #6d3fe0 10%, #3358f4 60%, #0b8fb0 100%);
  --g-card: linear-gradient(to top, #ffffff, #f8f9fe);
  --grid-line: rgba(15, 23, 60, 0.05);
  --glow-accent: 0 0 0 1px rgba(51, 88, 244, 0.3), 0 12px 32px -10px rgba(51, 88, 244, 0.35);
  --glow-soft: 0 20px 50px -24px rgba(51, 88, 244, 0.3);
  --shadow-sm: 0 2px 8px rgba(15, 23, 60, 0.06);
  --shadow-md: 0 12px 32px -14px rgba(15, 23, 60, 0.18);
  --shadow-lg: 0 30px 70px -28px rgba(15, 23, 60, 0.28);
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --cut: 14px;
  }
}