/*
 * Design tokens for the settings GUI + setup wizard.
 *
 * Hand-written, no Tailwind, no CSS-in-JS. The whole UI consumes these
 * variables so a future theme change is one file. Token names follow
 * the W3C Design Tokens draft (category-purpose-state). Light/dark
 * pairs live on `:root` and `[data-theme="dark"]`.
 *
 * Roadmap reference: unified-setup-and-settings-gui.md Phase 0.4.
 */

:root {
    /* Colour — neutrals */
    --color-bg:           #fafafa;
    --color-surface:      #ffffff;
    --color-surface-alt:  #f4f4f5;
    --color-border:       #e4e4e7;
    --color-border-strong:#a1a1aa;

    /* Colour — text */
    --color-text:         #18181b;
    --color-text-muted:   #52525b;
    --color-text-subtle:  #71717a;
    --color-text-inverse: #fafafa;

    /* Colour — accent (single accent, not per-button) */
    --color-accent:       #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-fg:    #ffffff;

    /* Colour — semantic */
    --color-success:      #16a34a;
    --color-warning:      #d97706;
    --color-danger:       #dc2626;
    --color-info:         #0284c7;

    /* Focus ring — always 2px, never removed */
    --color-focus-ring:   #3b82f6;

    /* Typography */
    --font-sans:          ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono:          ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

    --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-weight-regular:400;
    --font-weight-medium: 500;
    --font-weight-bold:   600;

    --line-height-tight:  1.25;
    --line-height-base:   1.5;
    --line-height-loose:  1.75;

    /* Spacing — 4px scale */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-focus:0 0 0 2px var(--color-focus-ring);

    /* Motion — kept minimal; respects prefers-reduced-motion below */
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Layout */
    --layout-max-width:    48rem;   /* 768px — form-friendly */
    --layout-side-padding: var(--space-6);
    --layout-content-gap:  var(--space-4);

    /* Z-index ladder */
    --z-base:    0;
    --z-overlay: 10;
    --z-modal:   20;
    --z-toast:   30;
}

[data-theme="dark"] {
    --color-bg:           #09090b;
    --color-surface:      #18181b;
    --color-surface-alt:  #27272a;
    --color-border:       #3f3f46;
    --color-border-strong:#52525b;

    --color-text:         #fafafa;
    --color-text-muted:   #a1a1aa;
    --color-text-subtle:  #71717a;
    --color-text-inverse: #18181b;

    --color-accent:       #3b82f6;
    --color-accent-hover: #60a5fa;
    --color-accent-fg:    #0b1220;

    --color-success:      #22c55e;
    --color-warning:      #f59e0b;
    --color-danger:       #ef4444;
    --color-info:         #38bdf8;

    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.6);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.7);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}
