/* =====================================================================
   Creator Genius — Colors, Type & Foundations
   Single source of truth for visual tokens.
   Import this in any HTML/JSX surface and reference vars via var(--cg-*).
   ===================================================================== */

/* ---- FONTS — self-hosted woff2 files in fonts/ ---- */
/* Inter (body / UI) */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
/* Plus Jakarta Sans (display / headlines / KPIs) */
@font-face { font-family:'Plus Jakarta Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/plus-jakarta-sans-800.woff2') format('woff2'); }
/* JetBrains Mono (code, hex codes, technical values only) */
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/jetbrains-mono-500.woff2') format('woff2'); }

:root {
  /* =============== CORE PALETTE — "Clean + Electric" =============== */
  --cg-ink:           #1A1A2E; /* primary text, authority bg          */
  --cg-ink-deep:      #0E0E1A; /* deepest ink, used in gradient start */
  --cg-ink-2:         #12121E; /* secondary dark surface              */
  --cg-plum:          #4A2D6B; /* depth accent / gradient mid         */
  --cg-plum-deep:     #3A2461; /* hero gradient mid                   */
  --cg-violet:        #7B61FF; /* PRIMARY action, the brand spark     */
  --cg-violet-light:  #9B8AFF; /* hover, gradient end                 */
  --cg-violet-soft:   #EEEAFF; /* tinted bg / chip                    */

  /* Neutrals */
  --cg-white:         #FFFFFF;
  --cg-grey-50:       #FAFAFA;
  --cg-grey-100:      #F4F4F5;
  --cg-grey-200:      #E4E4E7;
  --cg-grey-300:      #D4D4D8;
  --cg-grey-400:      #A1A1AA;
  --cg-grey-500:      #71717A;

  /* =============== FUNCTIONAL ACCENTS — earned, never decorative === */
  --cg-coral:         #FF6B6B; /* trending / reject / urgency         */
  --cg-coral-soft:    rgba(255, 107, 107, 0.08);
  --cg-teal:          #2DD4BF; /* approved / success / publish        */
  --cg-teal-dk:       #0F766E;
  --cg-teal-soft:     rgba(45, 212, 191, 0.08);
  --cg-amber:         #FBBF24; /* pending, attention                  */

  /* =============== SEMANTIC TOKENS — LIGHT MODE (default) ========== */
  --bg-primary:       var(--cg-white);
  --bg-secondary:     var(--cg-grey-50);
  --bg-card:          var(--cg-white);
  --bg-input:         var(--cg-white);

  --fg-primary:       var(--cg-ink);   /* h1, key text                */
  --fg-secondary:     var(--cg-grey-500); /* body                     */
  --fg-muted:         var(--cg-grey-400); /* meta, labels             */
  --fg-disabled:      var(--cg-grey-300);

  --border-default:   var(--cg-grey-100);
  --border-strong:    var(--cg-grey-200);
  --border-focus:     var(--cg-violet);

  --accent:           var(--cg-violet);
  --accent-hover:     #6A4EFF;
  --accent-bg-soft:   rgba(123, 97, 255, 0.08);

  --status-success:   var(--cg-teal);
  --status-warning:   var(--cg-amber);
  --status-danger:    var(--cg-coral);
  --status-info:      var(--cg-violet);

  /* =============== GRADIENTS — brand signatures ==================== */
  --cg-grad-hero:     linear-gradient(140deg, #0E0E1A 0%, #3A2461 55%, #7B61FF 100%);
  --cg-grad-deep:     linear-gradient(135deg, #0E0E1A 0%, #3A2461 100%);
  --cg-grad-violet:   linear-gradient(135deg, #7B61FF 0%, #9B8AFF 100%);
  --cg-grad-glow:     linear-gradient(135deg, #7B61FF 0%, #A78BFA 50%, #C4B5FD 100%);
  --cg-grad-energy:   linear-gradient(135deg, #FF6B6B 0%, #7B61FF 100%); /* coral->violet, sparingly */
  --cg-grad-fresh:    linear-gradient(135deg, #2DD4BF 0%, #7B61FF 100%); /* teal->violet  */
  --cg-grad-plum:     linear-gradient(135deg, #4A2D6B 0%, #7B61FF 100%);

  /* =============== TYPOGRAPHY ====================================== */
  --font-display:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Base type scale (px). Use semantic vars below in normal usage.   */
  --fs-hero:          72px; /* H1 marketing                            */
  --fs-h2:            48px; /* section title                           */
  --fs-h3:            32px; /* card heading                            */
  --fs-h4:            20px; /* subsection                              */
  --fs-h5:            17px; /* small heading                           */
  --fs-body-lg:       17px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-label:         12px; /* overline / section label                */
  --fs-tiny:          10px; /* mono code, fine print                   */

  /* Tight headlines, loose body — sophisticated tension (Rule 05).   */
  --ls-hero:          -3px;
  --ls-h2:            -2px;
  --ls-h3:            -1px;
  --ls-h4:            -0.5px;
  --ls-body:          0;
  --ls-label:         2.5px; /* uppercase overlines                    */

  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.5;
  --lh-relaxed:       1.75;
  --lh-loose:         1.8;

  /* =============== RADIUS ========================================== */
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-2xl:       32px;
  --radius-full:      9999px;

  /* =============== SHADOWS ========================================= */
  --shadow-sm:        0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-card:      0 2px 8px rgba(26, 26, 46, 0.04);
  --shadow-md:        0 12px 32px rgba(26, 26, 46, 0.06);
  --shadow-lg:        0 24px 64px rgba(26, 26, 46, 0.08);
  --shadow-xl:        0 40px 80px rgba(0, 0, 0, 0.25);
  --shadow-violet:    0 12px 32px rgba(123, 97, 255, 0.35); /* primary CTA hover */
  --shadow-ink:       0 12px 32px rgba(26, 26, 46, 0.20);

  /* =============== SPACING (4pt grid) ============================== */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-7: 28px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* =============== MOTION ========================================== */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);    /* brand easing  */
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:         150ms;
  --dur-base:         300ms;
  --dur-slow:         600ms;
}

/* =============== DARK MODE — surface/text remap; brand colors hold === */
[data-theme="dark"],
.cg-dark {
  --bg-primary:       var(--cg-ink);
  --bg-secondary:     var(--cg-ink-2);
  --bg-card:          rgba(255, 255, 255, 0.03);
  --bg-input:         rgba(255, 255, 255, 0.04);

  --fg-primary:       var(--cg-white);
  --fg-secondary:     rgba(255, 255, 255, 0.55);
  --fg-muted:         rgba(255, 255, 255, 0.3);
  --fg-disabled:      rgba(255, 255, 255, 0.2);

  --border-default:   rgba(255, 255, 255, 0.06);
  --border-strong:    rgba(255, 255, 255, 0.12);
}

/* =====================================================================
   SEMANTIC HELPER CLASSES — drop these on any element for canonical type
   ===================================================================== */
.cg-hero {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, var(--fs-hero));
  font-weight: 700;
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}
.cg-h1, .cg-h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, var(--fs-h2));
  font-weight: 700;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}
.cg-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.cg-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.cg-h5 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--fg-primary);
}
.cg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}
.cg-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}
.cg-label, .cg-overline {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cg-violet);
}
.cg-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-muted);
}
.cg-kpi {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

/* Base reset opt-in — apply to a wrapper, not html */
.cg-root {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}