/* ============================================================
   BROKEN STONES — Design Tokens
   Single source of truth for all site-wide styles.
   Edit here, everything updates automatically.
   ============================================================ */

:root {

    /* --- Colors: Brand --- */
    --color-brand-primary:   #2A4A36;   /* Pine teal — main accent */
    --color-brand-secondary: #4A7A5A;   /* Lighter pine — hover states */
    --color-brand-highlight: #8FBC8F;   /* Soft sage — subtle highlights */

    /* --- Colors: Surface (light mode default) --- */
    --color-bg:              #DDE0E4;   /* Alabaster grey — page background */
    --color-bg-surface:      #F3F6F9;   /* Platinum — cards, panels */
    --color-bg-raised:       #FFFFFF;   /* Pure white — elevated elements */
    --color-bg-overlay:      rgba(221, 224, 228, 0.85); /* semi-transparent backdrop */

    /* --- Colors: Text --- */
    --color-text-primary:    #0B0F13;   /* Inkblack — main body text */
    --color-text-secondary:  #4A5260;   /* Slate — supporting text, captions */
    --color-text-muted:      #8A929E;   /* Fog — placeholders, disabled */
    --color-text-inverse:    #F3F6F9;   /* Light — text on dark backgrounds */

    /* --- Colors: Border --- */
    --color-border:          #C8CDD4;   /* Default border */
    --color-border-strong:   #9AA0A8;   /* Stronger border for emphasis */
    --color-border-subtle:   #E8EAED;   /* Very light, almost invisible */

    /* --- Colors: Status --- */
    --color-success:         #2A7A3B;
    --color-warning:         #A66A00;
    --color-error:           #C0392B;
    --color-info:            #1A5276;

    /* --- Typography: Fonts --- */
    --font-heading:  'Georgia', 'Times New Roman', serif;
    --font-body:     system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:     'Courier New', 'Consolas', monospace;

    /* --- Typography: Scale --- */
    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-md:   1.125rem;   /*  18px */
    --text-lg:   1.25rem;    /*  20px */
    --text-xl:   1.5rem;     /*  24px */
    --text-2xl:  2rem;       /*  32px */
    --text-3xl:  2.5rem;     /*  40px */
    --text-4xl:  3.5rem;     /*  56px */

    /* --- Typography: Weight --- */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;

    /* --- Typography: Line Height --- */
    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* --- Spacing --- */
    --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 */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* --- Layout --- */
    --max-width-content: 800px;    /* Body text, readable columns */
    --max-width-wide:    1200px;   /* Full page sections */
    --max-width-narrow:  560px;    /* Forms, small panels */

    /* --- Border Radius --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;         /* Pills, avatars */

    /* --- Shadows --- */
    --shadow-sm:  0 1px 3px rgba(11, 15, 19, 0.10);
    --shadow-md:  0 4px 12px rgba(11, 15, 19, 0.12);
    --shadow-lg:  0 8px 24px rgba(11, 15, 19, 0.16);
    --shadow-xl:  0 16px 48px rgba(11, 15, 19, 0.20);

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* --- Z-index layers --- */
    --z-base:    0;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;
    --z-top:     9999;
}

/* ============================================================
   DARK MODE — override surface and text tokens
   ============================================================ */
[data-theme="dark"],
.dark-mode,
body.dark-mode {
    --color-bg:          #0B0F13;
    --color-bg-surface:  #0F1316;
    --color-bg-raised:   #161C22;
    --color-bg-overlay:  rgba(11, 15, 19, 0.85);

    --color-text-primary:   #F3F6F9;
    --color-text-secondary: #A0A8B4;
    --color-text-muted:     #5A6270;
    --color-text-inverse:   #0B0F13;

    --color-border:        #252C35;
    --color-border-strong: #3A4450;
    --color-border-subtle: #1A2028;

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.60);
}

/* ============================================================
   BASE RESET — minimal, consistent starting point
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin: 0;
}

/* --- Links --- */
a {
    color: var(--color-brand-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-brand-secondary);
    text-decoration: underline;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-top: 0;
}

/* --- Images --- */
img {
    max-width: 100%;
    display: block;
}