/**
 * d8onlinestore Brand Tokens — Quiet Ink direction
 *
 * Source-of-truth: /Users/yc/Desktop/Site/d8-brand-tokens.css
 * Deploy path: wp-content/themes/electro-child/assets/brand-tokens.css
 * Spec: docs/superpowers/specs/2026-04-20-d8-phase-0-brand-foundation-design.md
 */

:root {
    /* ---- Surface & neutral ---- */
    --d8-c-white:        #FFFFFF;
    --d8-c-paper:        #FAFAF7;
    --d8-c-hairline:     #EEEEE8;
    --d8-c-graphite:     #6B6B66;
    --d8-c-ink:          #0F0F0F;

    /* ---- Accent (use 5-7% of visual weight max) ---- */
    --d8-c-amber:        #D4804A;
    --d8-c-amber-hover:  #B86B3A;
    --d8-c-amber-tint:   #FDF4ED;

    /* ---- Functional ---- */
    --d8-c-success:      #2F7A4D;
    --d8-c-warning:      #B58900;
    --d8-c-danger:       #B94A3E;
    --d8-c-info:         #4A6B7A;

    /* ---- Semantic aliases — use these in components ---- */
    --d8-bg:             var(--d8-c-white);
    --d8-bg-alt:         var(--d8-c-paper);
    --d8-border:         var(--d8-c-hairline);
    --d8-text:           var(--d8-c-ink);
    --d8-text-muted:     var(--d8-c-graphite);
    --d8-accent:         var(--d8-c-amber);
    --d8-accent-hover:   var(--d8-c-amber-hover);
    --d8-accent-bg:      var(--d8-c-amber-tint);

    /* ---- Typography ---- */
    --d8-font-heading:   'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --d8-font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --d8-font-mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Type scale — 1.25 modular */
    --d8-text-xs:        12px;
    --d8-text-sm:        14px;
    --d8-text-base:      16px;
    --d8-text-lg:        18px;
    --d8-text-xl:        22px;
    --d8-text-2xl:       28px;
    --d8-text-3xl:       36px;
    --d8-text-4xl:       48px;
    --d8-text-hero:      clamp(56px, 7vw, 88px);

    --d8-lh-tight:       1.1;
    --d8-lh-snug:        1.3;
    --d8-lh-normal:      1.55;
    --d8-lh-relaxed:     1.75;

    --d8-track-tight:    -0.02em;
    --d8-track-normal:   0;
    --d8-track-loose:    0.04em;
    --d8-track-eyebrow:  0.16em;

    /* ---- Spacing ---- */
    --d8-space-1:        4px;
    --d8-space-2:        8px;
    --d8-space-3:        12px;
    --d8-space-4:        16px;
    --d8-space-5:        20px;
    --d8-space-6:        24px;
    --d8-space-8:        32px;
    --d8-space-10:       40px;
    --d8-space-12:       48px;
    --d8-space-16:       64px;
    --d8-space-20:       80px;
    --d8-space-24:       96px;

    --d8-container-max:  1280px;
    --d8-container-pad:  clamp(16px, 3vw, 32px);

    /* ---- Radius ---- */
    --d8-radius-sm:      4px;
    --d8-radius-md:      8px;
    --d8-radius-lg:      12px;
    --d8-radius-pill:    999px;

    /* ---- Shadow ---- */
    --d8-shadow-xs:      0 1px 2px rgba(15,15,15,0.04);
    --d8-shadow-sm:      0 2px 6px rgba(15,15,15,0.05), 0 1px 2px rgba(15,15,15,0.04);
    --d8-shadow-md:      0 8px 20px rgba(15,15,15,0.06), 0 2px 4px rgba(15,15,15,0.04);
    --d8-shadow-lg:      0 16px 40px rgba(15,15,15,0.08);
    --d8-shadow-accent:  0 4px 14px rgba(212,128,74,0.30);

    /* ---- Motion ---- */
    --d8-ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
    --d8-dur-instant:    120ms;
    --d8-dur-fast:       180ms;
    --d8-dur-base:       240ms;
    --d8-dur-slow:       360ms;
}

/* Reserved class for a future dark-mode pass (Faz 1+ karari) */
:root[data-d8-theme="dark"] {
    --d8-bg:       #0F0F0F;
    --d8-bg-alt:   #1A1A18;
    --d8-border:   #2A2A26;
    --d8-text:     #FAFAF7;
    --d8-text-muted: #A5A59E;
    --d8-shadow-accent: 0 4px 14px rgba(212,128,74,0.15);
}

/* ---- Primitive resets using tokens ---- */
body.d8-branded {
    font-family: var(--d8-font-body);
    color: var(--d8-text);
    background: var(--d8-bg);
    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}

body.d8-branded h1,
body.d8-branded h2,
body.d8-branded h3 {
    font-family: var(--d8-font-heading);
    letter-spacing: var(--d8-track-tight);
    line-height: var(--d8-lh-tight);
    color: var(--d8-text);
}

body.d8-branded .price,
body.d8-branded .woocommerce-Price-amount {
    font-variant-numeric: tabular-nums;
}

/* Primary button utility — Faz 1'de .btn veya tema button'lari bu pattern'i alacak */
body.d8-branded .d8-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--d8-space-2);
    padding: var(--d8-space-3) var(--d8-space-6);
    font: 600 var(--d8-text-sm) var(--d8-font-body);
    letter-spacing: var(--d8-track-loose);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--d8-radius-md);
    transition: background var(--d8-dur-fast) var(--d8-ease-smooth),
                box-shadow var(--d8-dur-fast) var(--d8-ease-smooth);
    cursor: pointer;
    border: 1px solid transparent;
}

/* WCAG note: amber (#D4804A) on white is ~3.7:1 contrast.
   Passes AA for Large Text (18px+ or 14px bold+) only.
   Use .d8-btn--primary for CTAs; do NOT use amber for body text. */
body.d8-branded .d8-btn--primary {
    background: var(--d8-accent);
    color: var(--d8-c-white);
    box-shadow: var(--d8-shadow-accent);
}
body.d8-branded .d8-btn--primary:hover {
    background: var(--d8-accent-hover);
}

body.d8-branded .d8-btn--ghost {
    background: transparent;
    color: var(--d8-text);
    border-color: var(--d8-text);
}
body.d8-branded .d8-btn--ghost:hover {
    background: var(--d8-text);
    color: var(--d8-c-white);
}

/* Eyebrow kicker (small-caps section label) */
body.d8-branded .d8-eyebrow {
    display: inline-block;
    font: 700 var(--d8-text-xs) var(--d8-font-body);
    letter-spacing: var(--d8-track-eyebrow);
    text-transform: uppercase;
    color: var(--d8-accent);
}