/*
 * ETERNEX DESIGN TOKENS v1.0
 * ============================
 * This file is the SINGLE SOURCE OF TRUTH for all Eternex colors.
 * Import it in every Eternex page: <link rel="stylesheet" href="eternex-tokens.css">
 * Then use var(--variable-name) everywhere. NEVER hardcode color values.
 *
 * FORBIDDEN: Do NOT override these variables. Do NOT create your own color values.
 * If a color you need is not listed here, it does not exist in the Eternex brand.
 */

:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --violet: #7C3AED;            /* Primary accent on LIGHT backgrounds */
  --cyan: #00E5FF;              /* Primary accent on DARK backgrounds */

  /* ===== BRAND GRADIENT ===== */
  /* Always 120deg. Always Violet-to-Cyan. Never reverse. */
  --brand-gradient: linear-gradient(120deg, #7C3AED 0%, #00E5FF 100%);

  /* ===== LIGHT MODE BACKGROUNDS ===== */
  --bg-light: #FFFFFF;          /* Main page background */
  --bg-light-alt: #F8FAFC;      /* Sections, cards, footer */
  --bg-violet-subtle: #F5F3FF;  /* Badge/tag background (light mode) */

  /* ===== DARK MODE BACKGROUNDS ===== */
  --bg-dark: #040926;           /* Main page background */
  --bg-dark-alt: #070D33;       /* Sections, cards */
  --bg-cyan-subtle: rgba(0, 229, 255, 0.08); /* Badge/tag background (dark mode) */

  /* ===== TEXT — LIGHT MODE ===== */
  --text-heading-light: #0F172A;  /* H1, H2, H3 */
  --text-body-light: #475569;     /* Paragraphs, descriptions */
  --text-muted-light: #94A3B8;    /* Captions, metadata, timestamps */

  /* ===== TEXT — DARK MODE ===== */
  --text-heading-dark: #FFFFFF;   /* H1, H2, H3 */
  --text-body-dark: #A0B4D6;      /* Paragraphs, descriptions */
  --text-muted-dark: #94A3B8;     /* Captions, metadata, timestamps */

  /* ===== FUNCTIONAL COLORS (both modes) ===== */
  --red: #FF3B3B;               /* Danger, alerts, negative words like "broken" */
  --gold: #FFB800;              /* Premium, rewards, highlights */
  --green: #059669;             /* Success, confirmations */

  /* ===== BORDERS ===== */
  --border-light: #E2E8F0;     /* Borders, dividers on light backgrounds */
  --border-dark: rgba(0, 229, 255, 0.15); /* Borders on dark backgrounds */

  /* ===== VENN DIAGRAM (FOUNDING TEAM) ===== */
  --venn-product-fill: rgba(0, 229, 255, 0.22);
  --venn-product-stroke: rgba(0, 229, 255, 0.45);
  --venn-product-text: rgba(0, 229, 255, 0.92);

  --venn-profit-fill: rgba(255, 184, 0, 0.22);
  --venn-profit-stroke: rgba(255, 184, 0, 0.45);
  --venn-profit-text: rgba(255, 184, 0, 0.92);

  --venn-scale-fill: rgba(201, 168, 255, 0.22);
  --venn-scale-stroke: rgba(201, 168, 255, 0.45);
  --venn-scale-text: rgba(201, 168, 255, 0.92);

  --venn-center-fill: rgba(4, 9, 38, 0.97);
  --venn-center-stroke: rgba(0, 229, 255, 0.6);
  --venn-center-text: #00E5FF;

  --venn-names: rgba(160, 180, 214, 0.72);
  --venn-market-fit: rgba(255, 240, 180, 0.85);
  --venn-growth-engine: rgba(200, 220, 255, 0.75);
  --venn-infrastructure: rgba(180, 220, 255, 0.75);
  --venn-result-label: rgba(160, 180, 214, 0.78);
}

/*
 * ===== GRADIENT TEXT UTILITY =====
 * Apply to a <span> inside a heading to make 1 keyword gradient.
 * LIMIT: Exactly 1 per H1. Max 1 per H2. Never on H3 or body text.
 */
.eternex-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/*
 * ===== FORBIDDEN VALUES =====
 * If ANY of these appear in your CSS, your code is WRONG:
 *
 *   #0891B2  (Tailwind Teal 600 — not Eternex)
 *   #0099BB  (wrong cyan)
 *   #00B8D4  (wrong cyan)
 *   #06B6D4  (Tailwind Cyan 500 — not Eternex)
 *   #0EA5E9  (Tailwind Sky 500 — not Eternex)
 *   #C07A00  (wrong gold — use #FFB800)
 *   #d97706  (Tailwind Amber 600 — not Eternex gold)
 *
 * The ONLY cyan in Eternex is #00E5FF.
 * The ONLY violet in Eternex is #7C3AED.
 * The ONLY gold in Eternex is #FFB800.
 */