/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The single source for colour, type, spacing, radius, shadow and layout.
   Public site, account area and admin all read from this file, so the whole
   platform stays one product (CLAUDE.md §5).

   Values are taken from the supplied design. Where a design colour did not
   meet the WCAG 2.2 AA contrast requirement at the size it is used, a separate
   token carries an accessible variant of the same hue rather than the design
   colour being overwritten — the display token keeps the brand value, the text
   token is the one that has to pass. Each is marked below with its measured
   ratio.
   ========================================================================== */

:root {
    /* --- Surfaces ------------------------------------------------------- */
    --color-canvas: #FAF5EF;
    --color-surface: #FFFFFF;
    --color-surface-sunken: #F6ECE1;
    --color-surface-warm: #F3E7DC;
    --color-surface-soft: #FBF3EA;      /* the book page's "Over het boek" band */
    --color-surface-dark: #2A2521;
    --color-surface-dark-raised: #37302B; /* a panel lifted off the dark footer */

    /* --- Ink ------------------------------------------------------------ */
    --color-ink: #2A2521;               /* 13.99:1 on canvas */
    --color-ink-inverse: #FAF5EF;
    --color-text: #6E645B;              /*  5.33:1 on canvas */
    --color-text-strong: #4A423B;       /*  8.10:1 on warm    */
    --color-text-muted: #7A6E63;        /*  4.57:1 on canvas  */

    /* Design used #9A8D80 here (2.98:1 — fails at any size). */
    --color-text-subtle: #7B6E62;       /*  4.56:1 on canvas */

    --color-text-on-dark: #D8CDC1;      /*  9.69:1 on dark */
    --color-text-on-dark-muted: #B8ADA1; /* 6.88:1 on dark */
    --color-link-on-dark: #DCD2C7;      /* 10.17:1 on dark */

    /* Design used #8C8075 here (3.94:1 — fails for 13px text). */
    --color-meta-on-dark: #968B81;      /*  4.55:1 on dark */

    /* --- Brand ---------------------------------------------------------- */
    /* Display only: 3.30:1 on canvas, which passes for text at 24px and up
       and for non-text marks, but not for anything smaller. */
    --color-accent: #B07C57;
    --color-accent-text: #8F6242;       /*  4.85:1 on canvas — accent at text sizes */
    --color-accent-strong: #7A5237;     /*  6.44:1 on canvas — hover */
    --color-accent-light: #D2A88A;      /*  7.01:1 on dark */

    --color-care: #8F6242;              /*  5.26:1 on white */
    --color-care-glow: #B0662F;
    --color-travel: #5F7A55;            /*  4.77:1 on white */
    --color-travel-glow: #82A06E;
    --color-travel-soft: #EAF0E6;       /* the blog's trip labels and fact boxes */
    --color-travel-line: #D7E2CF;
    /* Design used #C1644A (4.05:1 — fails for an 11px label). */
    --color-education: #B95A3F;         /*  4.57:1 on white */
    --color-education-glow: #D0836B;

    /* --- Forms and feedback --------------------------------------------- */
    /* The design's placeholder was #9A8D80 (3.23:1 on white — fails). */
    --color-placeholder: #817466;       /*  4.54:1 on white */

    /* Not in the design, which has no error state. Derived from the existing
       Education terracotta so it stays inside the palette; replace when the
       design system gains a real one. Text on it is ink, not terracotta. */
    --color-danger: #B95A3F;
    --color-danger-surface: #F7E7E1;

    /* --- Lines ---------------------------------------------------------- */
    --color-border: #EAD9C8;
    --color-border-card: #EEE1D2;
    --color-border-strong: #D8C6B4;
    --color-border-dark: #3D362F;
    --color-border-dark-strong: #554C43;

    /* --- Type ----------------------------------------------------------- */
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif;

    /* The design is a single fixed 1200px canvas. Every display size below is
       clamped so it scales down to 360px without a second set of rules; the
       upper bound of each clamp is the design's own value. */
    --text-hero: clamp(2.5rem, 6.2vw, 3.875rem);        /* 40 → 62px, the home page's own */
    --text-page-hero: clamp(2.25rem, 5.6vw, 3.5rem);    /* 36 → 56px, a page's own opening */
    --text-display: clamp(2rem, 4.4vw, 2.75rem);        /* 32 → 44px */
    --text-title: clamp(1.875rem, 3.8vw, 2.5rem);       /* 30 → 40px */
    --text-section: clamp(1.75rem, 3.4vw, 2.125rem);    /* 28 → 34px */
    --text-quote: clamp(1.375rem, 2.9vw, 1.8125rem);    /* 22 → 29px */
    --text-subtitle: clamp(1.25rem, 2.4vw, 1.5625rem);  /* 20 → 25px */
    --text-h3: 1.5rem;                                  /* 24px */
    --text-brand: 1.375rem;                             /* 22px */
    --text-lead: clamp(1.0625rem, 1.6vw, 1.1875rem);    /* 17 → 19px */
    --text-body: 1.0625rem;                             /* 17px */
    --text-base: 1rem;                                  /* 16px */
    --text-sm: 0.9375rem;                               /* 15px */
    --text-xs: 0.875rem;                                /* 14px */
    --text-2xs: 0.8125rem;                              /* 13px */
    --text-eyebrow: 0.6875rem;                          /* 11px */

    --leading-tight: 1.04;
    --leading-snug: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-eyebrow: 0.12em;
    --tracking-wide: 0.14em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- Spacing (4px base) --------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Vertical rhythm between page sections, tightened on small screens. */
    --section-gap: clamp(3.5rem, 7vw, 5.5rem);

    /* --- Radius --------------------------------------------------------- */
    --radius-xs: 0.375rem;   /*  6px */
    --radius-sm: 0.875rem;   /* 14px */
    --radius-md: 1rem;       /* 16px */
    --radius-lg: 1.125rem;   /* 18px */
    --radius-xl: 1.375rem;   /* 22px */
    --radius-pill: 999px;

    /* --- Shadow --------------------------------------------------------- */
    --shadow-header: 0 6px 24px rgba(42, 37, 33, 0.10);
    --shadow-card: 0 22px 44px rgba(42, 37, 33, 0.13);
    --shadow-raise: 0 14px 30px rgba(42, 37, 33, 0.24);
    --shadow-float: 0 20px 44px rgba(139, 90, 52, 0.22);
    --shadow-badge: 0 16px 34px rgba(139, 90, 52, 0.30);
    --shadow-cover: 0 20px 50px rgba(139, 90, 52, 0.40);

    /* --- Layout --------------------------------------------------------- */
    --shell-max: 75rem;                                 /* 1200px */
    --shell-gutter: clamp(1.25rem, 4.6vw, 3.5rem);      /* 20 → 56px */

    /* --- Motion --------------------------------------------------------- */
    --transition-fast: 0.18s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.4s ease;
}