/* ==========================================================================
   ignite27 — Design Tokens (CSS Custom Properties)
   Version 1.0.0 · 2026-07-04 · see CHANGELOG.md
   Drop into your global stylesheet. Light theme on :root, dark theme applies
   under [data-theme="dark"] (or wrap in a .dark class if you prefer).
   ========================================================================== */

:root {
  /* ---- Brand gradients ------------------------------------------------- */
  --ig-gradient-logo: linear-gradient(90deg, #EC008C 0%, #F15F22 69%, #F89938 100%);
  --ig-gradient-primary:
    radial-gradient(at 6% 8%,   #F3007F 0%, rgba(243,0,127,0) 46%),
    radial-gradient(at 98% 12%, #0A63D8 0%, rgba(10,99,216,0) 44%),
    radial-gradient(at 100% 55%,#1F15A9 0%, rgba(31,21,169,0) 42%),
    radial-gradient(at 45% 108%,#3100FF 0%, rgba(49,0,255,0) 52%),
    radial-gradient(at 2% 104%, #6A0DAD 0%, rgba(106,13,173,0) 46%),
    radial-gradient(at 72% 78%, #A100ED 0%, rgba(161,0,237,0) 46%),
    #A71DE6;
  --ig-gradient-primary-linear: linear-gradient(120deg, #F3007F 0%, #A71DE6 45%, #3100FF 100%);

  /* ---- Primary --------------------------------------------------------- */
  --ig-primary-magenta: #EC008C;
  --ig-primary-orange:  #F15F22;
  --ig-primary-amber:   #F89938;

  /* ---- Secondary ------------------------------------------------------- */
  --ig-secondary-sky:    #00A1FF;
  --ig-secondary-cyan:   #00D9EC;
  --ig-secondary-yellow: #FFBB00;
  --ig-secondary-green:  #1EC600;
  --ig-secondary-mauve:  #8400FF;

  /* ---- Charcoal (neutrals, dark) --------------------------------------- */
  --ig-charcoal-400: #000000;
  --ig-charcoal-300: #474747; /* body copy */
  --ig-charcoal-200: #767676; /* muted / captions */
  --ig-charcoal-100: #A7A7A7;
  --ig-ink:          #231F20; /* near-black — headings */

  /* ---- White (neutrals, light) ----------------------------------------- */
  --ig-white-100: #FFFFFF;
  --ig-white-200: #F4F4F4;
  --ig-white-300: #DBDBDB; /* hairline dividers / borders */

  /* ---- Semantic (light theme) ------------------------------------------ */
  --ig-bg:            var(--ig-white-100);
  --ig-bg-subtle:     var(--ig-white-200);
  --ig-text:          var(--ig-charcoal-300);
  --ig-text-heading:  var(--ig-ink);
  --ig-text-muted:    var(--ig-charcoal-200);
  --ig-border:        var(--ig-white-300);
  --ig-accent:        var(--ig-primary-magenta);
  --ig-success:       var(--ig-secondary-green);
  --ig-warning:       var(--ig-secondary-yellow);
  --ig-info:          var(--ig-secondary-sky);

  /* ---- Typography ------------------------------------------------------ */
  --ig-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ig-font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  --ig-weight-thin:    200;
  --ig-weight-regular: 400;
  --ig-weight-medium:  500;
  --ig-weight-bold:    700;

  /* font-size · line-height · letter-spacing per step */
  --ig-font-display: 72px; /* Thin Italic 200 · lh 1.00 · ls -0.02em */
  --ig-font-h1:      72px;
  --ig-font-h2:      60px;
  --ig-font-h3:      48px;
  --ig-font-h4:      36px;
  --ig-font-subhead: 24px;
  --ig-font-body:    16px;
  --ig-font-caption: 12px;

  --ig-lh-tight:   1.0;
  --ig-lh-heading: 1.05;
  --ig-lh-snug:    1.33;
  --ig-lh-body:    1.6;

  --ig-ls-display: -0.02em;
  --ig-ls-heading: -0.01em;
  --ig-ls-caption: 0.04em;
  --ig-ls-eyebrow: 0.12em;

  /* ---- Spacing (8-pt base) --------------------------------------------- */
  --ig-space-1:  4px;
  --ig-space-2:  8px;
  --ig-space-3:  12px;
  --ig-space-4:  16px;
  --ig-space-6:  24px;
  --ig-space-8:  32px;
  --ig-space-12: 48px;
  --ig-space-16: 64px;

  /* ---- Radii ----------------------------------------------------------- */
  --ig-radius-sm:   6px;
  --ig-radius-md:   10px;
  --ig-radius-lg:   14px;
  --ig-radius-xl:   20px;
  --ig-radius-2xl:  28px;
  --ig-radius-pill: 100px;
  --ig-radius-full: 50%;

  /* ---- Elevation ------------------------------------------------------- */
  --ig-shadow-01: 0 1px 2px rgba(35,31,32,.08);   /* cards at rest */
  --ig-shadow-02: 0 2px 20px rgba(35,31,32,.07);  /* raised cards */
  --ig-shadow-03: 0 12px 32px rgba(35,31,32,.12); /* menus, popovers */
  --ig-shadow-04: 0 24px 60px rgba(35,31,32,.20); /* dialogs, modals */
  --ig-shadow-glow: 0 10px 26px rgba(236,0,140,.40); /* primary hover */

  /* ---- Motion ---------------------------------------------------------- */
  --ig-ease:         cubic-bezier(.4, 0, .2, 1);
  --ig-duration-fast: 120ms;
  --ig-duration-base: 160ms;
  --ig-duration-slow: 240ms;
}

/* ==========================================================================
   Dark theme — charcoal base. Gradients are unchanged; accents lift ~8%.
   ========================================================================== */
[data-theme="dark"] {
  /* surfaces */
  --ig-dark-base:     #141315;
  --ig-dark-raised:   #1E1C1F;
  --ig-dark-overlay:  #2A272B;
  --ig-dark-border:   #3A363B;               /* ~ white @ 12% */
  --ig-dark-border-subtle: rgba(255,255,255,.12);

  /* text */
  --ig-dark-text:        #F5F4F5;
  --ig-dark-text-muted:  #B8B6B8;
  --ig-dark-text-subtle: #767676;

  /* accents on dark (brightened) */
  --ig-dark-magenta: #FF2DA0;
  --ig-dark-sky:     #35B4FF;
  --ig-dark-green:   #2EE015;
  --ig-dark-yellow:  #FFC933;

  /* semantic remap */
  --ig-bg:           var(--ig-dark-base);
  --ig-bg-subtle:    var(--ig-dark-raised);
  --ig-text:         var(--ig-dark-text);
  --ig-text-heading: var(--ig-dark-text);
  --ig-text-muted:   var(--ig-dark-text-muted);
  --ig-border:       var(--ig-dark-border);
  --ig-accent:       var(--ig-dark-magenta);
  --ig-info:         var(--ig-dark-sky);
}