/*! Atrium — a Ventus template (ventus.works)
 *  Free license: keep the Ventus badge visible. That's the whole deal.
 *  Want it badge-free? Commercial license: shop.ventus.works
 */

/* Atrium Design Tokens — Architectural Minimalism
 * SOURCE OF TRUTH for all stack variants (html/, react/, vue/, wordpress/).
 * The html/ variant keeps a verbatim copy at html/css/tokens.css because
 * file:// relative imports across folders are fragile. Edit HERE, then sync.
 *
 * The soul of the system: warm paper + warm ink + a single terracotta accent.
 * Geometry is architectural — hairline rules, sharp corners, a quiet blueprint
 * grid, and oversized editorial type that carries the composition. Calm over
 * decoration; light and air do the decorating.
 */

:root {
    /* ---- Palette primitives (architectural paper & ink) ---- */
    --at-bone:        #f6f4ef;   /* warm paper white — page ground */
    --at-bone-deep:   #efede6;   /* sunk panels, alt sections */
    --at-paper:       #ffffff;   /* raised surfaces */
    --at-ink:         #1d1b17;   /* near-black warm ink — headings */
    --at-ink-soft:    #2b2924;   /* body strong */
    --at-ink-muted:   #6f6b63;   /* body muted */
    --at-ink-faint:   #a39e93;   /* captions, meta */
    --at-terracotta:  #c35a2e;   /* the ONE warm accent */
    --at-terracotta-soft: #f0ded4;/* terracotta wash (chips, hovers) */
    --at-line:        rgba(29, 27, 23, 0.12);   /* hairlines */
    --at-line-soft:   rgba(29, 27, 23, 0.07);   /* fainter hairlines */
    --at-grid:        rgba(29, 27, 23, 0.045);  /* blueprint grid */

    /* ---- Semantic tokens (components reference ONLY these) ---- */
    --color-bg:           #f6f4ef;
    --color-bg-alt:       #efede6;
    --color-surface:      #ffffff;
    --color-surface-soft: #f1efe9;
    --color-heading:      #1d1b17;
    --color-text:         #2b2924;
    --color-text-muted:   #6f6b63;
    --color-primary:      #c35a2e;
    --color-primary-hover:#a94a23;
    --color-on-primary:   #ffffff;
    --color-accent:       #c35a2e;
    --color-accent-soft:  #f0ded4;
    --color-secondary:    #7b6a56;
    --color-on-accent:    #1d1b17;
    --color-border:       rgba(29, 27, 23, 0.12);
    --color-focus:        #2e7d8e;
    --color-error:        #b3261e;
    --color-success:      #3f734c;

    /* ---- Typography: Space Grotesk (architectural display) over Inter ---- */
    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:    'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
    --leading-body: 1.7;
    --u-track: 0.16em;   /* the spaced-out mono eyebrow signature */

    /* ---- Gradient (restrained — ink wash + accent rays) ---- */
    --gradient-sky:   linear-gradient(180deg, #f2efe7 0%, #f6f4ef 78%, #f6f4ef 100%);
    --gradient-brand: linear-gradient(120deg, #c35a2e 0%, #d88a5e 100%);
    --gradient-ink:   linear-gradient(180deg, #1d1b17 0%, #3a352b 100%);

    /* ---- Shape & elevation: sharp = architectural restraint ---- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --shadow-sm:  0 1px 2px rgba(29, 27, 23, 0.05);
    --shadow-soft: 0 6px 24px rgba(29, 27, 23, 0.07);
    --shadow-float: 0 18px 48px rgba(29, 27, 23, 0.12);
    --shadow-glow: 0 8px 30px rgba(195, 90, 46, 0.30);

    /* ---- Motion: slow, elegant, no bounce ---- */
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-2: cubic-bezier(0.4, 0, 0.2, 1);
    --dur:    250ms;
    --dur-slow: 450ms;

    /* ---- Layout ---- */
    --container: 74rem;
    --container-narrow: 46rem;
    --hairline: 1px;

    /* ---- The blueprint grid pattern (hero + alt bands) ---- */
    --blueprint:
        linear-gradient(var(--at-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--at-grid) 1px, transparent 1px);
    --blueprint-size: 28px 28px;
}

/* Ink-wash rule band (the signature horizontal accent) */
.rule-band {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 18%, var(--color-border) 82%, transparent);
    border: 0;
}