/* ============================================================
   Mohamed | Digital Labs — Design Tokens
   Colors + Typography (base + semantic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ----------------------------------------------------------
   1. Base tokens — Dark mode (default)
   ---------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg-primary: #0A211F;     /* Dark Teal — page background */
  --color-bg-secondary: #173142;   /* Deep Teal — alt sections, elevated */
  --color-bg-tertiary: #1A3E49;    /* Teal Mid — hover states */
  --color-surface: #0D2B2A;        /* Dark Surface — cards, modals */
  --color-bg-cinematic: #060E0D;   /* Deep black — always-dark hero */

  /* Accents */
  --color-accent: #0DE7B4;         /* Teal Vif — primary CTA, links */
  --color-accent-light: #d3ffca;   /* Mint — CTA hover */
  --color-accent-secondary: #D8FF85; /* Lime — energy, tags */

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B4BAB3;
  --color-text-tertiary: #6B7573;

  /* Borders */
  --color-border: #1E4A45;
  --color-border-subtle: #153530;

  /* Semantic */
  --color-error: #FF6B6B;
  --color-warning: #FFD93D;
  --color-success: #0DE7B4;

  /* Data-viz palette */
  --chart-1: #0DE7B4;
  --chart-2: #D8FF85;
  --chart-3: #0C71B9;
  --chart-4: #FF7C66;
  --chart-5: #B4BAB3;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
  --font-heading: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(13, 231, 180, 0.2), 0 0 60px rgba(13, 231, 180, 0.05);
  --shadow-lime-glow: 0 0 20px rgba(216, 255, 133, 0.15);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-enter: 400ms;
  --dur-reveal: 600ms;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0DE7B4 0%, #D8FF85 100%);
  --gradient-text: linear-gradient(90deg, #0DE7B4, #D8FF85);
  --gradient-dark: linear-gradient(180deg, #0A211F 0%, #173142 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(13, 231, 180, 0.08) 0%, rgba(216, 255, 133, 0.04) 100%);
}

/* ----------------------------------------------------------
   2. Light-mode overrides
   ---------------------------------------------------------- */
[data-theme="light"] {
  --color-bg-primary: #FAFBFA;
  --color-bg-secondary: #F0F2F0;
  --color-bg-tertiary: #E8EBE8;
  --color-surface: #FFFFFF;
  --color-accent: #0BAA85;
  --color-accent-light: #E6FAF5;
  --color-accent-secondary: #7AA600;
  --color-text-primary: #0A211F;
  --color-text-secondary: #4A5654;
  --color-text-tertiary: #8A9290;
  --color-border: #D4DAD8;
  --color-border-subtle: #E8EDEB;
  --color-error: #DC3545;
  --color-warning: #D4920A;
  --color-success: #0BAA85;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(11, 170, 133, 0.12);
}

/* ----------------------------------------------------------
   3. Semantic typography classes
   Apply directly to elements (h1, h2, p, etc) or as class.
   ---------------------------------------------------------- */

/* Display — Space Grotesk Bold */
.t-display-xl,
.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.03em;
}

.t-display-l,
.display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.02em;
}

.t-display-m,
.display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.02em;
}

/* Editorial — Instrument Serif italic for keyword emphasis inside headlines */
.t-editorial,
em.editorial,
.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Headings — Inter Tight */
.t-h1, h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.t-h2, h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.t-h3, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.t-h4, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-primary);
}

/* Body — Inter */
.t-body-l {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-primary);
}

.t-body-m,
p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-primary);
}

.t-body-s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* Mono — JetBrains Mono */
.t-overline,
.overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.t-code,
code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.t-data,
.data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   4. Base reset (opt-in helpers)
   ---------------------------------------------------------- */
.ds-reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ds-body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

/* Gradient-text utility — for headings of impact */
.t-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}