/*
 * Design tokens — single source of truth.
 * Palette & values defined in theme.json; mirrored here as CSS custom properties.
 */
:root {
    /* Brand */
    --color-primary:       #2c5545;
    --color-primary-hover:  #1e3d31;
    --color-primary-light:  #e8f0ec;
    --color-primary-muted:  #a3c4b4;

    /* Neutrals */
    --color-neutral-50:  #fafaf7;
    --color-neutral-100: #f4f3ef;
    --color-neutral-200: #e8e6e1;
    --color-neutral-300: #d4d1ca;
    --color-neutral-400: #a8a49c;
    --color-neutral-500: #7c7870;
    --color-neutral-600: #5c5850;
    --color-neutral-700: #3d3a34;
    --color-neutral-800: #2a2824;
    --color-neutral-900: #1a1917;

    /* Surfaces */
    --color-bg:      #fafaf7;
    --color-surface:  #ffffff;
    --color-elevated: #ffffff;

    /* Semantic aliases (backwards-compat) */
    --color-border:      var(--color-neutral-200);
    --color-text:        var(--color-neutral-900);
    --color-text-muted:  var(--color-neutral-500);
    --color-accent:      var(--color-primary);
    --color-accent-hover: var(--color-primary-hover);
    --color-accent-text: #ffffff;
    --color-danger:      #b14b3a;
    --color-good:        var(--color-primary);
    --color-warn:        #b88a2f;
    --color-info:        #3b7b9e;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

    --font-size-xs:  12px;
    --font-size-sm:  13px;
    --font-size-md:  15px;
    --font-size-lg:  18px;
    --font-size-xl:  24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;

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

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-loose:  1.7;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;

    /* Radii */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;

    /* Layout */
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-hover); }

.muted { color: var(--color-text-muted); }
code { font-family: var(--font-mono); font-size: 0.9em; }

/* Base button */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
button:hover, .btn:hover {
    background: var(--color-accent-hover);
}
button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--color-primary-muted);
    outline-offset: 2px;
}

/* Base inputs */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=tel],
input[type=search],
textarea,
select {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary-muted);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
input::placeholder, textarea::placeholder {
    color: var(--color-neutral-400);
}