/*
 * Onyx UI — tokens.css
 * Dark-first tool interface for image processing and export.
 * Inter font. Monochromatic palette. Shadcn-style token structure.
 *
 * Cascade order:
 *   1. :root  — light mode defaults
 *   2. [data-theme="dark"]  — dark mode (wins last)
 */

/* ─── GOOGLE FONTS ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600&family=Fraunces:wght@400;500&family=Geist:wght@400;500;600&family=Lato:wght@300;400;700&display=swap');

/* ─── LIGHT MODE DEFAULTS ────────────────────────────────────────────────────── */
:root, [data-theme="light"] {

  /* ── Color: Brand ─────────────────────────────────────────────── */
  --color-brand-accent:          #d97706;
  --color-brand-accent-hover:    #b45309;
  --color-brand-accent-subtle:   rgba(217, 119, 6, 0.12);

  /* ── Color: Surface ───────────────────────────────────────────── */
  --color-background:            #f4f4f5;
  --color-surface:               #ffffff;
  --color-surface-raised:        #f0f0f1;
  --color-surface-muted:         #e4e4e7;
  --color-surface-overlay:       rgba(0, 0, 0, 0.06);

  /* ── Color: Text ──────────────────────────────────────────────── */
  --color-foreground:            #0f0f0f;
  --color-foreground-secondary:  #1a1a1a;
  --color-foreground-muted:      #71717a;
  --color-foreground-disabled:   #a1a1aa;
  --color-foreground-inverse:    #f5f5f5;
  --color-foreground-on-accent:  #ffffff;

  /* ── Color: Border ────────────────────────────────────────────── */
  --color-border:                rgba(0, 0, 0, 0.09);
  --color-border-strong:         rgba(0, 0, 0, 0.14);
  --color-border-focus:          var(--color-brand-accent);

  /* ── Color: Neutral scale ─────────────────────────────────────── */
  --color-neutral-50:            #fafafa;
  --color-neutral-100:           #f4f4f5;
  --color-neutral-200:           #e4e4e7;
  --color-neutral-300:           #d4d4d8;
  --color-neutral-400:           #a1a1aa;
  --color-neutral-500:           #71717a;
  --color-neutral-600:           #52525b;
  --color-neutral-700:           #3f3f46;
  --color-neutral-800:           #27272a;
  --color-neutral-900:           #18181b;
  --color-neutral-950:           #09090b;

  /* ── Color: Semantic ─────────────────────────────────────────── */
  --color-success:               #16a34a;
  --color-success-subtle:        rgba(22, 163, 74, 0.12);
  --color-warning:               #d97706;
  --color-warning-subtle:        rgba(217, 119, 6, 0.12);
  --color-error:                 #dc2626;
  --color-error-subtle:          rgba(220, 38, 38, 0.12);
  --color-info:                  #2563eb;
  --color-info-subtle:           rgba(37, 99, 235, 0.12);

  /* ── Color: Tab/Toggle ────────────────────────────────────────── */
  --color-tab-container:         var(--color-surface-muted);
  --color-tab-active:            var(--color-surface);
  --color-tab-active-text:       var(--color-foreground);
  --color-tab-inactive-text:     var(--color-foreground-muted);

  /* ── Color: Surface action ────────────────────────────────────── */
  --color-surface-action:        var(--color-foreground);
  --color-surface-action-hover:  var(--color-brand-accent);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-family-primary:         'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono:            'Geist Mono', 'Fira Code', ui-monospace, monospace;

  --font-size-micro:             0.6875rem;   /* 11px */
  --font-size-xs:                0.75rem;     /* 12px */
  --font-size-sm:                0.875rem;    /* 14px */
  --font-size-base:              1rem;        /* 16px */
  --font-size-lg:                1.125rem;    /* 18px */
  --font-size-xl:                1.25rem;     /* 20px */
  --font-size-2xl:               1.5rem;      /* 24px */
  --font-size-3xl:               1.875rem;    /* 30px */
  --font-size-4xl:               2.25rem;     /* 36px */

  --font-weight-normal:          400;
  --font-weight-medium:          500;
  --font-weight-semibold:        600;
  --font-weight-bold:            700;

  --line-height-tight:           1.25;
  --line-height-snug:            1.375;
  --line-height-normal:          1.5;
  --line-height-relaxed:         1.625;

  --letter-spacing-tight:        -0.025em;
  --letter-spacing-normal:       0em;
  --letter-spacing-wide:         0.025em;
  --letter-spacing-wider:        0.05em;
  --letter-spacing-widest:       0.1em;

  /* ── Spacing (4px base) ───────────────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ── Shape / Radius ───────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;      /* main component radius */
  --radius-lg:     10px;     /* tab container radius */
  --radius-xl:     14px;
  --radius-2xl:    20px;
  --radius-full:   9999px;

  /* Component-semantic radius (overrideable by seeds) */
  --radius-btn:    var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-md);
  --radius-badge:  var(--radius-full);

  /* ── Elevation / Shadow ───────────────────────────────────────── */
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:     0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-card:   var(--shadow-sm);

  /* ── Motion ───────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ──────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Component metrics ────────────────────────────────────────── */
  --nav-height:   52px;
  --sidebar-width: 260px;
}

/* ─── DARK MODE (source palette — comes LAST) ────────────────────────────────── */
[data-theme="dark"] {

  /* ── Color: Brand ─────────────────────────────────────────────── */
  --color-brand-accent:          #f59e0b;
  --color-brand-accent-hover:    #d97706;
  --color-brand-accent-subtle:   rgba(245, 158, 11, 0.15);

  /* ── Color: Surface ───────────────────────────────────────────── */
  --color-background:            #111111;
  --color-surface:               #1a1a1a;
  --color-surface-raised:        #222222;
  --color-surface-muted:         #2a2a2a;
  --color-surface-overlay:       rgba(0, 0, 0, 0.5);

  /* ── Color: Text ──────────────────────────────────────────────── */
  --color-foreground:            #f5f5f5;
  --color-foreground-secondary:  #e8e8e8;
  --color-foreground-muted:      #999999;
  --color-foreground-disabled:   #555555;
  --color-foreground-inverse:    #111111;
  --color-foreground-on-accent:  #111111;

  /* ── Color: Border ────────────────────────────────────────────── */
  --color-border:                rgba(255, 255, 255, 0.10);
  --color-border-strong:         rgba(255, 255, 255, 0.15);
  --color-border-focus:          var(--color-brand-accent);

  /* ── Color: Tab/Toggle ────────────────────────────────────────── */
  --color-tab-container:         #2a2a2a;
  --color-tab-active:            #1e1e1e;
  --color-tab-active-text:       #ffffff;
  --color-tab-inactive-text:     #999999;

  /* ── Color: Surface action ────────────────────────────────────── */
  --color-surface-action:        var(--color-foreground);
  --color-surface-action-hover:  var(--color-brand-accent);

  /* ── Shadows (darker in dark mode) ─────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:     0 16px 40px rgba(0, 0, 0, 0.7);
}

/* ─── BASE RESETS ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-active, var(--font-family-primary));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  margin: 0;
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }