/* =========================================================
   MAHARA MEDIA — Colors & Type
   Single source of truth for tokens + semantic CSS vars.
   ========================================================= */

/* Rubik + Geist Mono from Google Fonts; Geist served locally from /fonts */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700;800;900&display=swap");

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/Geist-Thin.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("fonts/Geist-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/Geist-Light.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Geist-Regular.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Geist-Medium.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Geist-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Geist-Bold.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Geist-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/Geist-Black.ttf") format("truetype"); }

:root {
  /* --------------------------------------------------------
     COLOR TOKENS
     -------------------------------------------------------- */

  /* Primary palette */
  --mahara-teal: #00CFC8;
  --deep-space: #091333;
  --true-black: #000000;
  --pure-white: #FFFFFF;

  /* Accent + gradient */
  --royal-blue: #2E5BD6;
  --mahara-gradient: linear-gradient(135deg, #2E5BD6 0%, #00CFC8 65%, #00CFC8 100%);

  /* Teal scale (derived — for hover/press/tints, use sparingly) */
  --teal-50:  #E6FBFA;
  --teal-100: #B8F3F1;
  --teal-200: #7FE8E4;
  --teal-300: #3DDAD4;
  --teal-400: #00CFC8;   /* base */
  --teal-500: #00B3AD;
  --teal-600: #009691;
  --teal-700: #007571;

  /* Deep Space scale */
  --space-50:  #F3F4F9;
  --space-100: #D9DCEB;
  --space-200: #A8AEC9;
  --space-300: #6D759E;
  --space-400: #3A4272;
  --space-500: #1B2550;
  --space-600: #091333;   /* base */
  --space-700: #060D24;
  --space-800: #030717;

  /* Neutrals (warm-cool neutral set for text/dividers on light) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FA;
  --neutral-100: #EEF0F4;
  --neutral-200: #DFE2EA;
  --neutral-300: #C2C7D4;
  --neutral-500: #6B7280;
  --neutral-700: #2A2F3A;
  --neutral-900: #0A0C12;

  /* --------------------------------------------------------
     SEMANTIC COLOR VARS
     -------------------------------------------------------- */

  /* Default: dark-first surface (primary brand treatment) */
  --bg:            var(--deep-space);
  --bg-elevated:   #0E1A42;
  --bg-subtle:     #0B1638;
  --surface:       rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);

  --fg:            var(--pure-white);
  --fg-muted:      rgba(255, 255, 255, 0.72);
  --fg-subtle:     rgba(255, 255, 255, 0.52);
  --fg-faint:      rgba(255, 255, 255, 0.32);

  --accent:        var(--mahara-teal);
  --accent-hover:  #1BD9D2;
  --accent-press:  #00B3AD;
  --accent-fg:     var(--deep-space);   /* text color on teal fill */

  --royal blue:        var(--royal-blue);

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --divider:       rgba(255, 255, 255, 0.06);

  --focus-ring:    0 0 0 3px rgba(0, 207, 200, 0.45);

  /* --------------------------------------------------------
     RADII
     -------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* --------------------------------------------------------
     SHADOWS + GLOWS
     -------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.38);
  --glow-teal:  0 0 24px rgba(0, 207, 200, 0.45);
  --glow-teal-soft: 0 0 40px rgba(0, 207, 200, 0.22);

  /* --------------------------------------------------------
     SPACING — 8px grid
     -------------------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease-brand:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-micro:   200ms;
  --dur-ui:      300ms;
  --dur-page:    600ms;

  /* --------------------------------------------------------
     TYPE — FAMILIES
     -------------------------------------------------------- */
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-arabic: "Geist", "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --------------------------------------------------------
     TYPE — SCALE
     -------------------------------------------------------- */
  --fs-display: 72px;
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-h4:      1.3;
  --lh-body:    1.6;
  --lh-small:   1.5;
  --lh-micro:   1.4;

  --tr-display: -0.03em;
  --tr-h1:      -0.025em;
  --tr-h2:      -0.02em;
  --tr-h3:      -0.015em;
  --tr-h4:      -0.01em;
  --tr-body:    0;
  --tr-micro:   0.01em;
}

/* =========================================================
   LIGHT MODE (opt-in via .light or [data-theme="light"])
   Dark is default — brand leads with Deep Space.
   ========================================================= */
.light,
[data-theme="light"] {
  --bg:            var(--pure-white);
  --bg-elevated:   #FFFFFF;
  --bg-subtle:     var(--neutral-50);
  --surface:       var(--neutral-50);
  --surface-hover: var(--neutral-100);

  --fg:            var(--true-black);
  --fg-muted:      #2A2F3A;
  --fg-subtle:     #5A6072;
  --fg-faint:      #8A90A0;

  --accent-fg:     var(--deep-space);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --divider:       var(--neutral-100);

  --shadow-sm: 0 1px 2px rgba(9, 19, 51, 0.06);
  --shadow-md: 0 6px 18px rgba(9, 19, 51, 0.10);
  --shadow-lg: 0 18px 48px rgba(9, 19, 51, 0.16);
}

/* =========================================================
   BASE ELEMENT STYLES
   ========================================================= */
html {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 500; }

p { margin: 0; text-wrap: pretty; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Arabic text — apply with lang="ar" or .ar */
[lang="ar"], .ar {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.1em; /* +10% vs equivalent English hierarchy */
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
}

.text-micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  font-weight: 500;
}

.text-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.text-mono  { font-family: var(--font-mono); }

.text-accent { color: var(--accent); }
.text-muted  { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }

.bg-deep-space { background: var(--deep-space); color: var(--pure-white); }
.bg-white      { background: var(--pure-white); color: var(--true-black); }

.mahara-gradient-text {
  background: var(--mahara-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mahara-gradient-bg { background: var(--mahara-gradient); }

/* Animated gradient border — signature effect */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  isolation: isolate;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg),
    #2E5BD6, #00CFC8, #2E5BD6);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gradient-spin 6s linear infinite;
  pointer-events: none;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes gradient-spin {
  to { --angle: 360deg; }
}

/* Focus */
:where(button, a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}