/* ============================================================
   TAX STRATEGY MATRIX — Design System

   Notion-caliber: 8px grid, near-zero shadow, flat surface,
   grayscale + one warm tint, type-driven hierarchy.
   ============================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* — Surface — */
    --bg:             #FAF8F5;
    --bg-secondary:   #F3F0EB;
    --bg-tertiary:    #EDE9E3;
    --bg-card:        #FFFFFF;
    --bg-hover:       #F3F0EB;
    --bg-input:       #FFFFFF;
    --bg-callout:     #F5F2ED;
    --bg-code:        #F3F0EB;
    --bg-dark:        #2C2825;
    --bg-dark-alt:    #3A3632;

    /* — Border — */
    --border:         rgba(0, 0, 0, 0.08);
    --border-strong:  rgba(0, 0, 0, 0.12);
    --border-focus:   rgba(140, 115, 85, 0.40);

    /* — Text — */
    --text-primary:   #1A1714;
    --text-secondary: #6B6560;
    --text-tertiary:  #9B9590;
    --text-inverse:   #FAF8F5;
    --text-dark-body: #B8A48C;

    /* — Accent (warm tan) — */
    --accent:         #8B7355;
    --accent-hover:   #7A6349;
    --accent-subtle:  rgba(140, 115, 85, 0.08);
    --accent-muted:   rgba(140, 115, 85, 0.15);

    /* — Nav active (earthy green) — */
    --nav-active:     #047857;
    --nav-active-text:#ecfdf5;

    /* — Semantic — */
    --positive:       #3D7A3F;
    --negative:       #B54A32;
    --info:           #5B7FA5;

    /* — Font — */
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* — Type Scale (minor third, grounded) — */
    --t-xs:    0.75rem;     /* 12 */
    --t-sm:    0.8125rem;   /* 13 */
    --t-base:  0.9375rem;   /* 15 */
    --t-md:    1rem;        /* 16 */
    --t-lg:    1.125rem;    /* 18 */
    --t-xl:    1.375rem;    /* 22 */
    --t-2xl:   1.75rem;     /* 28 */
    --t-3xl:   2.5rem;      /* 40 */

    /* — Spacing (8px grid) — */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* — Radius — */
    --r-sm:  3px;
    --r-md:  6px;
    --r-lg:  8px;

    /* — Shadow (barely there) — */
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

    /* — Transition — */
    --ease: 120ms ease;

    /* — Layout — */
    --sidebar-w: 240px;
    --content-w: 1100px;
}


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

body {
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg);
    min-height: 100vh;
}