/* ============================================================
   newdgrie / default — _01_tokens.css

   Design system foundations: colours, typography, spacing,
   timing, layout primitives. Every other stylesheet in this
   theme uses these variables — never hard-coded values.

   Direction: quiet luxury — Brunello Cucinelli, SuitSupply,
   Loro Piana. Mono palette, sharp edges, generous whitespace,
   editorial typography, restrained accents.
   ============================================================ */

:root {

    /* ── COLOUR ────────────────────────────────────────────── */

    /* Ink (text + foundational dark) */
    --dg-ink:        #1a1a1a;   /* near-black, primary text */
    --dg-ink-soft:   #4a4a4a;   /* secondary text */
    --dg-muted:      #6b6b6b;   /* tertiary text, captions */
    --dg-faint:      #999999;   /* placeholder, meta */

    /* Surfaces */
    --dg-paper:      #ffffff;   /* primary background */
    --dg-cream:      #fafaf7;   /* warm off-white, hero/card bg */
    --dg-stone:      #f1efe9;   /* subtle accent surface */
    --dg-line:       #e8e6e0;   /* divider, faint borders */

    /* Accent — used very sparingly */
    --dg-gold:       #8b6f47;   /* tailoring accent (links, CTAs) */
    --dg-gold-soft:  #b8956a;   /* hover state */

    /* Status (functional only — no decorative use) */
    --dg-success:    #4a7c59;
    --dg-warning:    #c08948;
    --dg-error:      #a04545;

    /* Aliases (semantic) */
    --dg-bg:         var(--dg-paper);
    --dg-bg-soft:    var(--dg-cream);
    --dg-text:       var(--dg-ink);
    --dg-text-muted: var(--dg-muted);
    --dg-border:     var(--dg-line);
    --dg-link:       var(--dg-ink);
    --dg-link-hover: var(--dg-gold);


    /* ── TYPOGRAPHY ─────────────────────────────────────────── */

    /* Stacks: serif for editorial headings, sans for utility text. */
    --dg-font-serif: Georgia, 'Times New Roman', Times, serif;
    --dg-font-sans:  'Helvetica Neue', Helvetica, Arial,
                     'Segoe UI', Roboto, sans-serif;
    --dg-font-mono:  'SF Mono', Menlo, Consolas, monospace;

    /* Type scale (modular, ratio ≈ 1.25) */
    --dg-text-xxs:   11px;
    --dg-text-xs:    12px;
    --dg-text-sm:    14px;
    --dg-text-base:  16px;
    --dg-text-md:    18px;
    --dg-text-lg:    22px;
    --dg-text-xl:    28px;
    --dg-text-2xl:   38px;
    --dg-text-3xl:   54px;
    --dg-text-4xl:   72px;

    /* Line heights */
    --dg-leading-tight:   1.15;
    --dg-leading-snug:    1.35;
    --dg-leading-normal:  1.55;
    --dg-leading-loose:   1.75;

    /* Letter spacing — uppercase labels need wide tracking */
    --dg-track-tight:    -0.01em;
    --dg-track-normal:    0em;
    --dg-track-wide:      0.05em;
    --dg-track-wider:     0.1em;
    --dg-track-widest:    0.2em;

    /* Weights */
    --dg-weight-light:    300;
    --dg-weight-regular:  400;
    --dg-weight-medium:   500;
    --dg-weight-semibold: 600;
    --dg-weight-bold:     700;


    /* ── SPACING ─────────────────────────────────────────────
       4px-based scale. Use these tokens, never raw px values,
       to keep vertical rhythm consistent.                    */

    --dg-space-xxs: 4px;
    --dg-space-xs:  8px;
    --dg-space-sm:  12px;
    --dg-space-md:  16px;
    --dg-space-lg:  24px;
    --dg-space-xl:  32px;
    --dg-space-2xl: 48px;
    --dg-space-3xl: 64px;
    --dg-space-4xl: 96px;
    --dg-space-5xl: 128px;


    /* ── LAYOUT ────────────────────────────────────────────── */

    --dg-container-max:     1400px;
    --dg-container-narrow:  960px;
    --dg-container-prose:   720px;
    --dg-gutter:            24px;
    --dg-gutter-mobile:     16px;


    /* ── BORDERS / SHAPES ──────────────────────────────────── */

    --dg-border-thin:    1px;
    --dg-border-medium:  2px;

    /* Sharp-edged by default — luxury aesthetic */
    --dg-radius-sharp:   0;
    --dg-radius-soft:    2px;
    --dg-radius-pill:    999px;
    --dg-radius-circle:  50%;


    /* ── SHADOWS ───────────────────────────────────────────── */

    --dg-shadow-sm:   0 1px 2px rgba(26, 26, 26, 0.04);
    --dg-shadow-md:   0 4px 12px rgba(26, 26, 26, 0.06);
    --dg-shadow-lg:   0 12px 32px rgba(26, 26, 26, 0.08);
    --dg-shadow-hover: 0 6px 20px rgba(26, 26, 26, 0.1);


    /* ── MOTION ────────────────────────────────────────────── */

    --dg-duration-fast:  150ms;
    --dg-duration-base:  240ms;
    --dg-duration-slow:  400ms;
    --dg-duration-slower:600ms;

    --dg-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --dg-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --dg-ease-in:        cubic-bezier(0.4, 0, 1, 1);


    /* ── Z-INDEX ───────────────────────────────────────────── */

    --dg-z-below:        -1;
    --dg-z-base:         1;
    --dg-z-sticky:       50;
    --dg-z-overlay:      900;
    --dg-z-modal:        1000;
    --dg-z-popover:      1050;
    --dg-z-toast:        1100;


    /* ── BREAKPOINT REFERENCE ──────────────────────────────── */

    /* (Used as @media values — CSS variables can't go inside
       @media rules, but documenting here for consistency.)
       Mobile-first. Breakpoints used in the rest of the system:
         sm: 480px
         md: 768px
         lg: 1024px
         xl: 1280px
         2xl: 1440px                                            */
}


/* ============================================================
   Reduced motion preference — collapse all timings.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dg-duration-fast:   1ms;
        --dg-duration-base:   1ms;
        --dg-duration-slow:   1ms;
        --dg-duration-slower: 1ms;
    }
}