/* ============================================================================
   Metablox Design Tokens — Web (Tailwind v4)
   Generated-by-hand mirror of design-system/tokens/semantic.json.
   Canonical brand = orange #EA794C.

   HOW TO USE
   ----------
   In metablox-ui/src/index.css, after the Tailwind imports, add:
       @import '../../design-system/platforms/web/tokens.css';
   (adjust the relative path to wherever you place it).

   Then use semantic utilities only — e.g. bg-brand, text-ink, border-line.
   Dark mode works via the OS preference OR a `.dark` class on a parent.
   ========================================================================== */

/* 1) Raw mode-switching variables (light defaults) ------------------------- */
:root {
  --ds-bg:            #FAFAFA;
  --ds-surface:       #F2F2F7;
  --ds-card:          #FFFFFF;
  --ds-elevated:      #FFFFFF;
  --ds-overlay:       rgba(0, 0, 0, 0.40);

  --ds-ink:           #1A1A1A;
  --ds-ink-soft:      #6B6B6B;
  --ds-ink-faint:     #9E9E9E;
  --ds-on-brand:      #FFFFFF;
  --ds-link:          #B25531;
  --ds-link-hover:    #D86A3F;

  --ds-brand:         #EA794C; /* identity / accents / primary CTA fill (use a DARK label) */
  --ds-brand-hover:   #EE8E60; /* CTA hover — lightens so the dark label stays AA */
  --ds-brand-strong:  #B25531; /* deeper fill for when a WHITE label is required (~5:1) */
  --ds-accent:        #2563EB; /* blue — supporting only */
  --ds-gold:          #F5C542;

  --ds-line:          #E8E8E8;
  --ds-card-border:   #F0F0F0;
  --ds-focus:         #EA794C;
  --ds-input-border:  #D1D5DB;

  --ds-success:       #10B981;
  --ds-success-text:  #047857;
  --ds-error:         #EF4444;
  --ds-error-text:    #B91C1C;
  --ds-warning:       #F59E0B;
  --ds-warning-text:  #B45309;
  --ds-info:          #2563EB;

  --ds-collectible:   #6BBA1C; /* leaderboard: can collect */
  --ds-urgent:        #DF361F; /* leaderboard: < 3 days     */
}

/* 2) Dark overrides — OS preference and/or explicit `.dark` class ---------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --ds-bg:           #0A0A0A;
    --ds-surface:      #1C1C1E;
    --ds-card:         #1C1C1E;
    --ds-elevated:     #2C2C2E;
    --ds-overlay:      rgba(0, 0, 0, 0.60);

    --ds-ink:          #FFFFFF;
    --ds-ink-soft:     #9E9E9E;
    --ds-ink-faint:    #6B6B6B;
    --ds-link:         #F4A07A;
    --ds-link-hover:   #F6C3A6;

    --ds-brand-hover:  #EE8E60;
    --ds-accent:       #60A5FA;

    --ds-line:         #38383A;
    --ds-card-border:  #38383A;
    --ds-focus:        #F4A07A;
    --ds-input-border: #565659;

    --ds-success-text: #34D399;
    --ds-error-text:   #F87171;
    --ds-warning-text: #FBBF24;
  }
}
.dark {
  --ds-bg:           #0A0A0A;
  --ds-surface:      #1C1C1E;
  --ds-card:         #1C1C1E;
  --ds-elevated:     #2C2C2E;
  --ds-overlay:      rgba(0, 0, 0, 0.60);

  --ds-ink:          #FFFFFF;
  --ds-ink-soft:     #9E9E9E;
  --ds-ink-faint:    #6B6B6B;
  --ds-link:         #F4A07A;
  --ds-link-hover:   #F6C3A6;

  --ds-brand-hover:  #EE8E60;
  --ds-accent:       #60A5FA;

  --ds-line:         #38383A;
  --ds-card-border:  #38383A;
  --ds-focus:        #F4A07A;
  --ds-input-border: #565659;

  --ds-success-text: #34D399;
  --ds-error-text:   #F87171;
  --ds-warning-text: #FBBF24;
}

/* 3) Expose tokens to Tailwind v4 as utilities ----------------------------
   `@theme inline` lets utilities track the runtime vars above, so the same
   class (e.g. bg-card) renders correctly in light AND dark.                  */
@theme inline {
  --color-bg:           var(--ds-bg);
  --color-surface:      var(--ds-surface);
  --color-card:         var(--ds-card);
  --color-elevated:     var(--ds-elevated);
  --color-overlay:      var(--ds-overlay);

  --color-ink:          var(--ds-ink);
  --color-ink-soft:     var(--ds-ink-soft);
  --color-ink-faint:    var(--ds-ink-faint);
  --color-on-brand:     var(--ds-on-brand);  /* white — for saturated fills (destructive, urgent, blue) */
  --color-on-cta:       #1A1A1A;             /* FIXED dark label on the orange CTA (both themes) */
  --color-link:         var(--ds-link);
  --color-link-hover:   var(--ds-link-hover);

  --color-brand:        var(--ds-brand);
  --color-brand-hover:  var(--ds-brand-hover);
  --color-brand-strong: var(--ds-brand-strong);
  --color-accent:       var(--ds-accent);
  --color-gold:         var(--ds-gold);

  --color-line:         var(--ds-line);
  --color-card-border:  var(--ds-card-border);
  --color-focus:        var(--ds-focus);
  --color-input-border: var(--ds-input-border);

  --color-success:      var(--ds-success);
  --color-success-text: var(--ds-success-text);
  --color-error:        var(--ds-error);
  --color-error-text:   var(--ds-error-text);
  --color-warning:      var(--ds-warning);
  --color-warning-text: var(--ds-warning-text);
  --color-info:         var(--ds-info);

  --color-collectible:  var(--ds-collectible);
  --color-urgent:       var(--ds-urgent);

  /* Radius scale — overrides Tailwind defaults to match tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;  /* cards */
  --radius-xl: 20px;  /* elevated / modals */

  /* Elevation */
  --shadow-card:     0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 20px rgba(0, 0, 0, 0.12);

  /* Desktop breakpoint (the one real web breakpoint) */
  --breakpoint-desktop: 813px;
}

/* Note: the 4px spacing grid already matches Tailwind's default scale
   (p-1=4px … p-4=16px … p-6=24px … p-8=32px), so no spacing override
   is needed — just stay on integer steps. */