:root {
    /* ============================================
       COLOR — SURFACES
       Backgrounds at different elevations.
       ============================================ */
    --color-surface-base:        #ffffff;
    --color-surface-raised:      #f7f7f7;
    --color-surface-sunken:      #ededed;
    --color-surface-overlay:     rgba(0, 0, 0, 0.4);

    /* ============================================
       COLOR — TEXT
       Text colors at different emphasis levels.
       ============================================ */
    --color-text-primary:        #1a1a1a;
    --color-text-secondary:      #555555;
    --color-text-muted:          #888888;
    --color-text-on-accent:      #ffffff;
    --color-text-link:           #1a1a1a;

    /* ============================================
       COLOR — ACCENT
       Primary accent (used for buttons, links,
       focus states, branding moments).
       ============================================ */
    --color-accent-primary:      #4a4a4a;
    --color-accent-primary-hover:#333333;
    --color-accent-secondary:    #888888;
    --color-accent-soft:         #d4d4d4;

    /* ============================================
       COLOR — STATUS
       Semantic colors for state communication.
       ============================================ */
    --color-status-success:      #2d7d3f;
    --color-status-warning:      #b87333;
    --color-status-danger:       #b33a3a;
    --color-status-info:         #3a6db3;

    /* ============================================
       COLOR — BORDERS & DIVIDERS
       ============================================ */
    --color-border-strong:       #cccccc;
    --color-border-soft:         #e5e5e5;
    --color-border-subtle:       #f0f0f0;

    /* ============================================
       TYPOGRAPHY — FAMILIES
       ============================================ */
    --font-family-display:       Georgia, 'Times New Roman', serif;
    --font-family-body:          Georgia, 'Times New Roman', serif;
    --font-family-mono:          'SF Mono', Consolas, 'Liberation Mono', monospace;

    /* ============================================
       TYPOGRAPHY — SIZES
       ============================================ */
    --font-size-xs:              0.75rem;
    --font-size-sm:              0.875rem;
    --font-size-base:            1rem;
    --font-size-lg:              1.125rem;
    --font-size-xl:              1.35rem;
    --font-size-2xl:             1.75rem;
    --font-size-3xl:             2.25rem;

    /* ============================================
       TYPOGRAPHY — WEIGHTS
       ============================================ */
    --font-weight-regular:       400;
    --font-weight-medium:        500;
    --font-weight-bold:          700;

    /* ============================================
       TYPOGRAPHY — LINE HEIGHTS
       ============================================ */
    --line-height-tight:         1.2;
    --line-height-base:          1.5;
    --line-height-loose:         1.7;

    /* ============================================
       SPACING SCALE
       Use these for margins, paddings, gaps.
       Built on a 4px / 0.25rem base.
       ============================================ */
    --space-1:                   0.25rem;
    --space-2:                   0.5rem;
    --space-3:                   0.75rem;
    --space-4:                   1rem;
    --space-5:                   1.5rem;
    --space-6:                   2rem;
    --space-7:                   3rem;
    --space-8:                   4rem;

    /* ============================================
       BORDERS — RADII
       ============================================ */
    --radius-none:               0;
    --radius-sm:                 3px;
    --radius-md:                 6px;
    --radius-lg:                 12px;
    --radius-pill:               999px;

    /* ============================================
       BORDERS — WIDTHS
       ============================================ */
    --border-width-thin:         1px;
    --border-width-medium:       2px;
    --border-width-thick:        3px;

    /* ============================================
       SHADOWS / ELEVATION
       ============================================ */
    --shadow-sm:                 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:                 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg:                 0 6px 16px rgba(0, 0, 0, 0.12);

    /* ============================================
       TRANSITIONS / MOTION
       ============================================ */
    --transition-fast:           120ms ease;
    --transition-base:           200ms ease;
    --transition-slow:           320ms ease;

    /* ============================================
       LAYOUT
       ============================================ */
    --layout-max-width:          1200px;
    --layout-rail-width:         200px;
    --layout-nav-height:         3.5rem;
}