/* Milapulse design system; calm, editorial, long-form-first.
   A deliberate counter to engagement-maximising social media: generous
   reading measure, a quiet jade-on-ink palette (the DPN house colour), and
   no external font/asset CDNs by design (the platform refuses surveillance).
   Light + dark are token-driven off prefers-color-scheme.

   Every colour, size, gap, radius, weight and duration comes from a token in
   :root below; that block is where a brand change is made. The games section
   still carries its own board and piece colours (moving to --game-* tokens). */

/* ---- design tokens --------------------------------------------------- */
:root {
    color-scheme: light dark;

    /* jade: the DPN accent (jade-on-ink). One ramp, used sparingly. */
    --jade-50:  #ecfdf5;
    --jade-300: #6ee7b7;
    --jade-500: #10b07a;
    --jade-600: #0a8f63;
    --jade-700: #0a734f;
    --jade-800: #07583d;

    /* light theme (warm paper) */
    --bg:        #faf9f6;
    --surface:   #ffffff;
    --surface-2: #f4f2ec;
    --border:    #e6e2d8;
    --ink:       #1c1b18;       /* primary text */
    --ink-2:     #56524a;       /* secondary text */
    --ink-3:     #6f6a60;       /* muted / meta: 5.1:1 on bg (was #8a857a, 3.5:1) */
    /* Field edges are a control boundary, so they need 3:1 (WCAG 1.4.11);
       --border is a decorative hairline and stays quiet. */
    --border-field: #948e82;
    /* Jade 700, not 600: white on 600 is 4.1:1 and 600 on paper 3.9:1, both
       under the 4.5:1 text needs. 700 is 5.9 and 5.6. */
    --accent:    var(--jade-700);
    --accent-hover: var(--jade-800);
    --accent-ink:#ffffff;
    --accent-soft: var(--jade-50);
    --danger:    #b4231f;
    --warn:      #d99b1f;       /* fills and edges only */
    --warn-ink:  #8a5d00;       /* text on a warn tint */
    --shadow:    0 1px 2px rgba(28,27,24,.04), 0 6px 24px -12px rgba(28,27,24,.14);
    /* A solid outline: the old 28% glow was 1.4:1 against the page. */
    --focus:     2px solid var(--accent);

    /* type */
    --serif: "Iowan Old Style", "Source Serif 4", "Source Serif Pro",
             Georgia, Cambria, "Times New Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
    --mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
             "Roboto Mono", Menlo, Consolas, monospace;

    /* Type scale. Every UI size is one of these; the two reading sizes below
       it are separate because the post body is tuned on its own. */
    --step--3: .75rem;     /* badges, uppercase labels */
    --step--2: .875rem;    /* meta, hints, secondary lines */
    --step--1: .95rem;     /* UI text: buttons, nav, lists */
    --step-0:  1rem;
    --step-1:  1.15rem;    /* small headings */
    --step-2:  1.3rem;     /* section headings */
    --step-3:  1.5rem;     /* card and profile titles */
    --step-4:  1.85rem;    /* page titles */
    --step-5:  2.3rem;     /* article and hero titles */
    --text-body:  1.0625rem;
    --text-prose: 1.2rem;

    /* Spacing, on a 4px grid. Padding, margins and gaps use these; only
       hairline nudges under 3px are written out. */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  2rem;
    --space-8:  2.5rem;
    --space-9:  3rem;
    --space-10: 4rem;

    --weight-medium: 600;
    --weight-bold:   650;

    --dur-fast: .12s;
    --dur:      .18s;

    --radius:   14px;
    --radius-sm: 9px;
    --radius-pill: 999px;
    --measure:  44rem;     /* reading column */
    --wide:     64rem;     /* app/management column */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #131311;       /* warm ink */
        --surface:   #1b1b18;
        --surface-2: #232220;
        --border:    #322f2a;
        --ink:       #ece9e1;
        --ink-2:     #b3aea2;
        --ink-3:     #938e82;   /* 4.7:1 on surface-2 (was #807b70, 3.8:1) */
        --border-field: #736e63;
        --accent:    var(--jade-500);
        --accent-hover: var(--jade-300);
        --accent-ink:#06251a;
        --accent-soft: color-mix(in srgb, var(--jade-500) 16%, transparent);
        --danger:    #f0857f;
        --warn:      #d99b1f;
        --warn-ink:  #f2c46d;
        --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    }
}