/* ─────────────────────────────────────────────────────────────────────────
   NexusCompress — Design Tokens  (v2.2.17, Phase 2 expanded)
   Defines a named scale on top of the base variables in styles.css and
   redesign.css. Use these throughout tool-specific CSS (nexus-extras.css,
   inline overrides) so future changes are one-line edits here.
───────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Border Radius Scale ── */
    --radius-xs:   4px;              /* micro: inline code, strip badge */
    --radius-sm:   6px;              /* small controls: buttons, icon-btn, codec badge */
    --radius-md:   var(--r, 10px);   /* medium: file lists, input rings (= --r = 10px) */
    --radius-lg:   12px;             /* large: floating panels, crop stage, results panel */
    --radius-xl:   var(--r2, 16px);  /* extra large: settings cards, tool panels (= --r2 = 16px) */
    --radius-pill: 999px;            /* pills: chips, status badges, theme-toggle */

    /* ── Type Scale (named tiers) ── */
    --text-2xs:  0.6rem;      /*  9.6px — absolute micro labels */
    --text-xs:   0.6875rem;   /* 11px  — codec badge, format tags, tool-tab badge */
    --text-sm:   0.75rem;     /* 12px  — hints, secondary metadata */
    --text-ui:   0.8125rem;   /* 13px  — UI controls: tabs, settings, file items */
    --text-base: 0.875rem;    /* 14px  — body text, prose */
    --text-md:   0.95rem;     /* 15px  — callouts, tool sub-headings */
    --text-lg:   1.05rem;     /* 17px  — section headings */
    --text-xl:   1.2rem;      /* 19px  — workspace titles */
    --text-2xl:  1.5rem;      /* 24px  — page headings */
    --text-3xl:  1.75rem;     /* 28px  — tool panel headings */

    /* ── Font Weight Scale ── */
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    800;

    /* ── Spacing Scale ── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── Semantic Colour Tokens (FIX 8) ── */
    --color-success:     #22c55e;
    --color-success-lt:  #4ade80;
    --color-success-bg:  color-mix(in srgb, #22c55e 12%, transparent);
    --color-error:       #ef4444;
    --color-error-lt:    #f87171;
    --color-error-bg:    color-mix(in srgb, #ef4444 12%, transparent);
    --color-warn:        #f59e0b;
    --color-warn-lt:     #fbbf24;
    --color-warn-bg:     color-mix(in srgb, #f59e0b 12%, transparent);
    --color-info:        #3b82f6;
    --color-info-lt:     #60a5fa;
    --color-info-bg:     color-mix(in srgb, #3b82f6 12%, transparent);
    --color-ai:          #818cf8;
    --color-ai-lt:       #a5b4fc;
    --color-ai-bg:       color-mix(in srgb, #818cf8 12%, transparent);

    /* ── Semantic Aliases (match var names used in user CSS specs) ── */
    --muted:     var(--text-muted);
    --border:    var(--surface-border);
    --surface-2: color-mix(in srgb, var(--text) 6%, transparent);

    /* ── Component Tokens ── */

    /* Drop zones */
    --drop-padding-y: 2.5rem;
    --drop-padding-x: 1.5rem;
    --drop-border-width: 2px;
    --drop-radius: var(--radius-xl);

    /* Buttons */
    --btn-radius:       var(--radius-pill);   /* Phase 2: pill buttons */
    --btn-font-size:    var(--text-base);
    --btn-font-weight:  var(--weight-bold, 700);
    --btn-padding-y:    0.65rem;
    --btn-padding-x:    var(--space-6);
    --btn-line-height:  1.5;
    --btn-min-height:   44px;

    /* Settings cards */
    --card-radius:         var(--radius-xl);
    --card-header-padding: var(--space-4) var(--space-5);
    --card-body-padding:   var(--space-5);

    /* Privacy banners */
    --privacy-banner-gap:         0.5rem;
    --privacy-banner-padding:     0.55rem 0.85rem;
    --privacy-banner-font-size:   var(--text-ui);
    --privacy-banner-font-weight: 600;

    /* File list items */
    --file-item-radius:    var(--radius-lg);
    --file-item-padding:   0.75rem 1rem;
    --file-item-font-size: var(--text-ui);

    /* Badges (small, non-pill) */
    --badge-radius:      var(--radius-xs);
    --badge-font-size:   var(--text-xs);
    --badge-font-weight: 600;

    /* Tool header */
    --tool-hero-mb:       1rem;
    --tool-workspace-px:  var(--space-5);
    --tool-workspace-pb:  var(--space-8);

    /* Touch targets */
    --touch-min: 2.75rem;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-base:   0.2s ease;
}

/* ── Dark mode semantic colour overrides ── */
html.dark {
    --color-success:    #5cb896;
    --color-success-lt: #7dd3b8;
    --color-error:      #e57373;
    --color-error-lt:   #ef9a9a;
    --color-warn:       #d4a24a;
    --color-warn-lt:    #e0bc7a;
}