/**
 * BurnOut Italy — burnout/default theme
 *
 * Tokens (colors, type scale, fonts) are emitted from admin config by
 * template/page/html/config-css.phtml as :root custom properties. The
 * fallbacks below keep the site styled on cache cold or if the template
 * fails to render. Google Fonts are loaded from config-css.phtml, so no
 * @import is needed here.
 */

/* ============================ TOKENS ============================ */
/* Single source of truth for defaults. config-css.phtml overrides these at
   runtime ONLY for fields the admin has set — keeping one list to maintain. */
:root {
    /* Palette — admin-driven (refresh inspired by MahoBoi mega-menu spec) */
    --c-primary:       #ff5a1f;
    --c-primary-hover: #ff7a3f;
    --c-primary-soft:  rgba(255, 90, 31, 0.15);
    --c-text:          #14110d;
    --c-link:          #0066c0;
    --c-link-hover:    #cb7e3e;
    --c-price:         #b12704;
    /* Palette — not exposed in admin */
    --c-text-muted:    #5a564e;
    --c-text-mute:     #8a857b;
    --c-border:        rgba(20, 17, 13, 0.08);
    --c-border-2:      rgba(20, 17, 13, 0.16);
    --c-bg:            #ffffff;
    --c-bg-alt:        #f6f4ef;
    --c-bg-alt-2:      #ece8df;
    --c-price-old:     #8a857b;
    --c-price-special: #ee001c;
    --c-dark-surface:  #111315;
    /* Dark chrome — header, topbar, brand rail */
    --c-d-bg:          #0b0c0d;
    --c-d-surface:     #111315;
    --c-d-surface-2:   #16191c;
    --c-d-surface-3:   #1f2327;
    --c-d-line:        rgba(255, 255, 255, 0.09);
    --c-d-line-2:      rgba(255, 255, 255, 0.16);
    --c-d-text:        #f4f1ec;
    --c-d-text-dim:    #a8a39a;
    --c-d-text-mute:   #76726a;

    /* === SPEC ALIASES (MahoBoi color spec) ============================
       Short-name aliases for the palette above. Use these in new CSS;
       the longer --c-* / --c-d-* names stay canonical so existing
       components keep working. */
    /* Accent (moto orange) */
    --accent:           var(--c-primary);          /* #ff5a1f */
    --accent-2:         var(--c-primary-hover);    /* #ff7a3f */
    --accent-soft:      var(--c-primary-soft);     /* rgba(255,90,31,0.15) */
    /* Dark chrome */
    --d-bg:             var(--c-d-bg);
    --d-surface:        var(--c-d-surface);
    --d-surface-2:      var(--c-d-surface-2);
    --d-surface-3:      var(--c-d-surface-3);
    --d-line:           var(--c-d-line);
    --d-line-2:         var(--c-d-line-2);
    --d-text:           var(--c-d-text);
    --d-text-dim:       var(--c-d-text-dim);
    --d-text-mute:      var(--c-d-text-mute);
    /* Light page */
    --l-bg:             var(--c-bg);
    --l-surface:        #ffffff;
    --l-surface-2:      var(--c-bg-alt);
    --l-surface-3:      var(--c-bg-alt-2);
    --l-line:           var(--c-border);
    --l-line-2:         var(--c-border-2);
    --l-text:           var(--c-text);
    --l-text-dim:       var(--c-text-muted);
    --l-text-mute:      var(--c-text-mute);

    /* === NEW SPEC TOKENS (gradients + utility) ====================== */
    /* Use-case card gradients (warm/cool/neutral surface options) */
    --use-case-warm:    linear-gradient(135deg, #2a1108, #3a1a08);
    --use-case-cool:    linear-gradient(135deg, #0f1a26, #182838);
    --use-case-neutral: linear-gradient(135deg, #161616, #232323);
    /* Hero category panel — "most shopped" surface */
    --hero-bg:          linear-gradient(135deg, #1a1815, #0b0c0d);
    --hero-glow:        rgba(255, 90, 31, 0.18);
    /* EU flag (utility band, locale switcher) */
    --eu-blue:          #003399;
    --eu-yellow:        #ffcc00;
    /* Accent alternatives — swap --accent value to switch theme energy */
    --accent-moto-orange:   #ff5a1f;
    --accent-race-red:      #e11d2e;
    --accent-electric-blue: #1f74ff;
    --accent-acid-yellow:   #c8ff00;
    --accent-desaturated:   #bdb6a8;

    /* Region backgrounds — admin-driven */
    --c-header-bg:     var(--c-d-bg);
    --c-topbar-bg:     var(--c-primary);
    --c-footer-bg:     #111318;
    --c-footer-text:   #8a92a6;
    --c-footer-link:   #d0d6e0;
    /* Boi aliases (historical) — admin-driven */
    --boi-link:             var(--c-link);
    --boi-accent:           #eeba38;
    --boi-header-bg:        var(--c-header-bg);
    --boi-topbar-bg:        var(--c-topbar-bg);
    --boi-footer-bg:        var(--c-footer-bg);
    --boi-footer-link:      var(--c-footer-link);
    --boi-footer-text:      var(--c-footer-text);
    --boi-header-color:     #fff;
    --boi-nav-color:        #fff;
    /* Icons (injected dynamically by block, static fallbacks here) */
    --boi-icon-chevron:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    --boi-icon-search:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    /* Maho base aliases — admin-driven */
    --maho-color-primary:      var(--c-primary);
    --maho-color-primary-hover: var(--c-primary-hover);
    --maho-color-price:        var(--c-price);
    --maho-color-text-primary: var(--c-text);
    --maho-color-background:   var(--c-bg);
    --maho-color-border:       var(--c-border);
    --maho-color-text-secondary: var(--c-text-muted);
    /* Radius */
     --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;

    /* New Layout Tokens */
    --boi-radius:          var(--r-sm);
    --boi-container-width: 1200px;
    --boi-shadow:          0 8px 24px rgba(0,0,0,0.08); /* medium */
    --p-base:              16px; /* cozy */
    
    /* Component Defaults */
    --card-border:         1px solid var(--c-border);
    --card-shadow:         none;
    --card-bg:             #fff;
    
    --btn-bg:              var(--c-primary);
    --btn-border:          var(--c-primary);
    --btn-color:           #fff;
    --btn-hover-bg:        var(--c-primary-hover);
    /* Type scale — base is admin-driven. All other sizes scale automatically via mathematical ratios. */
    --fs-base: 14px;
    --fs-xs:   calc(var(--fs-base) * 0.85);
    --fs-sm:   calc(var(--fs-base) * 0.95);
    --fs-md:   calc(var(--fs-base) * 1.15);
    --fs-lg:   calc(var(--fs-base) * 1.4);
    --fs-xl:   calc(var(--fs-base) * 1.75);
    --fs-2xl:  calc(var(--fs-base) * 2.25);
    /* Line heights */
    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;
    /* Fonts — admin-driven (Archivo display + Inter body + JetBrains Mono per
       eyebrows/labels da MahoBoi mega-menu spec) */
    --boi-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --boi-font-headings: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --boi-font-display:  var(--boi-font-headings);
    --boi-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* === TYPOGRAPHY ROLES (MahoBoi design spec) =====================
       Semantic tokens — one per UI surface. Each role bundles the
       `font` shorthand (style/weight/size/line-height/family) plus
       optional letter-spacing and text-transform. Components consume
       them with:
           font: var(--ty-foo);
           letter-spacing: var(--ty-foo-ls, normal);
           text-transform: var(--ty-foo-tt, none);

       Deviations from the spec (intentional):
       - --ty-h1 → clamp(40px..60px) responsive, was static 44px.
       - All sub-12px text bumped +1 (10→11, 9→11) — JetBrains Mono e
         Inter italic restano leggibili a 11px ma muoiono sotto.
       - --ty-pcard-price → 18px (vs spec 13px). Mono narrow + base price
         deve emergere visivamente nel grid.
       - --ty-pcard-title → 15px (vs spec 13px) per leggibilità grid.
       - --ty-brand-tag → 13px italic (vs spec 11px italic).
       =============================================================== */

    /* Header */
    --ty-logo:           italic 900 28px/1 var(--boi-font-display);
    --ty-nav:            700 13px/1.2 var(--boi-font-display);
    --ty-nav-ls:         0.1em;
    --ty-nav-tt:         uppercase;
    --ty-topstrip:       600 13px/1.4 var(--boi-font-body);
    --ty-search:         400 15px/1.4 var(--boi-font-body);
    --ty-utility:        400 14px/1.4 var(--boi-font-body);
    --ty-cart-badge:     700 11px/1 var(--boi-font-mono);

    /* Megamenu */
    --ty-kicker:         500 11px/1.2 var(--boi-font-mono);
    --ty-kicker-ls:      0.22em;
    --ty-kicker-tt:      uppercase;
    --ty-section-title:  italic 900 28px/1 var(--boi-font-display);
    --ty-brand-name:     700 15px/1.2 var(--boi-font-display);
    --ty-brand-tag:      italic 400 13px/1.3 var(--boi-font-body);
    --ty-brand-num:      500 11px/1 var(--boi-font-mono);
    --ty-hero-eyebrow:   500 11px/1.2 var(--boi-font-mono);
    --ty-hero-eyebrow-tt: uppercase;
    --ty-hero-title:     italic 900 28px/1.05 var(--boi-font-display);
    --ty-hero-count:     500 12px/1.2 var(--boi-font-mono);
    --ty-hero-cta:       500 12px/1 var(--boi-font-mono);
    --ty-hero-cta-tt:    uppercase;
    --ty-cat-card-label: 600 14px/1.2 var(--boi-font-display);
    --ty-cat-card-count: 500 11px/1 var(--boi-font-mono);
    --ty-usecase-title:  800 15px/1.2 var(--boi-font-display);
    --ty-usecase-copy:   400 13px/1.4 var(--boi-font-body);
    --ty-promo-title:    800 17px/1.2 var(--boi-font-display);
    --ty-promo-copy:     400 13px/1.4 var(--boi-font-body);
    --ty-trending:       500 12px/1 var(--boi-font-mono);
    --ty-trending-tt:    uppercase;
    --ty-trending-name:  600 13px/1.3 var(--boi-font-body);
    --ty-trending-price: 700 15px/1 var(--boi-font-mono);

    /* Pagina categoria / listing */
    --ty-breadcrumb:     500 11px/1 var(--boi-font-mono);
    --ty-breadcrumb-ls:  0.1em;
    --ty-breadcrumb-tt:  uppercase;
    --ty-h1:             900 clamp(48px, 6vw, 72px) / 1.05 var(--boi-font-display);
    --ty-subtitle:       400 15px/1.55 var(--boi-font-body);
    --ty-cat-desc:       400 16px/1.65 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ty-sidebar-label:  700 13px/1.2 var(--boi-font-display);
    --ty-sidebar-label-tt: uppercase;
    --ty-sidebar-check:  400 14px/1.3 var(--boi-font-body);
    --ty-pcard-title:    600 15px/1.3 var(--boi-font-body);
    --ty-pcard-price:    700 18px/1 var(--boi-font-mono);
    --ty-pcard-price-old: 500 13px/1 var(--boi-font-mono);
    --ty-badge-sale:     700 11px/1 var(--boi-font-mono);
    --ty-badge-sale-tt:  uppercase;

    /* Misc */
    --t: 0.15s ease;
    --header-z: 1000;
    --dropdown-z: 1100;
}