/*
 * Antenore Energia visual identity - design tokens (V-01)
 * Reference: https://www.antenore.it/ - extracted 2026-04-17
 * This file is the single source of truth for every color / dimension / motion
 * token used across components.css and layout.css. Raw hex values outside this
 * file are forbidden (see V-16 token sweep).
 */

:root {
    /* ---------- Color primitives ---------- */
    --color-red-600: #B61818;
    --color-red-700: #942121;
    --color-red-800: #B20E10;
    --color-red-900: #B30A12;

    --color-green-400: #6CC247;
    --color-green-800: #1B6836;

    --color-gold-500: #DF9E28;

    --color-navy-900: #0F2032;

    --color-neutral-50:  #FFFFFF;
    --color-neutral-100: #FCFAF9;
    --color-neutral-150: #FAF8F7;
    --color-neutral-200: #F5F0EA;
    --color-neutral-250: #F1ECE6;
    --color-neutral-300: #DDDDDD;
    --color-neutral-400: #CCCCCC;
    --color-neutral-500: #999999;
    --color-neutral-600: #807F7F;
    --color-neutral-650: #80818D;
    --color-neutral-700: #727272;
    --color-neutral-750: #4F4F4F;
    --color-neutral-800: #444444;
    --color-neutral-900: #333333;
    --color-neutral-950: #000000;

    --color-accent-pink:   #FF0A72;
    --color-accent-orange: #FF7C06;
    --color-accent-taupe:  #BFAEA6;

    --color-state-success: #1B6836;
    --color-state-info:    #0F2032;
    --color-state-warning: #DF9E28;
    --color-state-danger:  #B61818;
    --color-state-error:   #DC3232;

    /* ---------- Semantic (light theme) ---------- */
    --bg-default: var(--color-neutral-50);
    --bg-muted:   var(--color-neutral-200);
    --bg-subtle:  var(--color-neutral-100);
    --bg-inverse: var(--color-navy-900);
    --bg-accent:  var(--color-red-600);

    --fg-default:    var(--color-neutral-900);
    --fg-muted:      #6B6B6B; /* accessible fix for #999 on cream (AA) */
    --fg-on-accent:  var(--color-neutral-50);
    --fg-on-inverse: var(--color-neutral-50);
    --fg-accent:     var(--color-red-600);

    --border-default: var(--color-neutral-500);
    --border-subtle:  var(--color-neutral-300);
    --border-focus:   var(--color-neutral-900);
    --border-accent:  var(--color-red-700);

    --accent-primary:   var(--color-red-600);
    --accent-eco-start: var(--color-green-400);
    --accent-eco-end:   var(--color-green-800);
    --accent-gold:      var(--color-gold-500);
    --accent-slate:     var(--color-neutral-650);

    /* ---------- Typography ---------- */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

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

    --font-size-body:    max(13px, calc(10px + 0.2vw));
    --font-size-small:   0.707em;
    --font-size-caption: 12px;
    --font-size-label:   10px;
    --font-size-h1:      calc(24px + 1.2vw);
    --font-size-h2:      calc(24px + 0.8vw);
    --font-size-h3:      calc(20px + 0.6vw);
    --font-size-h4:      calc(17px + 0.3vw);
    --font-size-h5:      calc(14px + 0.3vw);

    --line-height-body:    max(22px, calc(20px + 0.2vw));
    --line-height-tight:   1.1em;
    --line-height-caption: 1.5;
    --line-height-label:   20px;
    --line-height-h1:      calc(34px + 1.2vw);
    --line-height-h2:      calc(34px + 0.8vw);
    --line-height-h3:      calc(30px + 0.6vw);
    --line-height-h4:      calc(27px + 0.3vw);
    --line-height-h5:      calc(24px + 0.3vw);

    --letter-spacing-label:  2px;
    --letter-spacing-button: 2px;
    --letter-spacing-nav:    0.02em;

    /* ---------- Spacing (10px base) ---------- */
    --space-0:  0;
    --space-1:  5px;
    --space-2:  8px;
    --space-3:  10px;
    --space-4:  15px;
    --space-5:  20px;
    --space-6:  25px;
    --space-7:  30px;
    --space-8:  40px;
    --space-9:  50px;
    --space-10: 60px;
    --space-11: 80px;
    --space-12: 100px;

    --space-fluid-sm:  calc(30px + 2.5vw);
    --space-fluid-md:  calc(40px + 2vw);
    --space-fluid-lg:  calc(60px + 4vw);
    --space-fluid-xl:  calc(80px + 8vw);
    --space-fluid-gap: calc(30px + 2vw);

    /* ---------- Radius ---------- */
    /* Customer brief (2026-04-17, S-030): the visual identity is squared.
     * Every UI radius collapses to 0 at the token layer so cards, buttons,
     * inputs, pills, badges and pager chips render with sharp corners.
     * `--radius-full` is kept at 50% for genuinely circular elements
     * (avatars / status dots) which the customer's design language still
     * treats as round. */
    --radius-none: 0;
    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-pill: 0;
    --radius-full: 50%;

    /* ---------- Elevation ---------- */
    --shadow-0: none;
    --shadow-1: 3px 4px currentColor;
    --shadow-2: 0 3px 20px -5px var(--color-neutral-900);
    --shadow-3: 0 3px 20px -4px var(--color-neutral-900);
    --shadow-4: -10px 10px 26px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px rgba(182, 24, 24, 0.3);
    --shadow-focus-strong: 0 0 0 5px #1199FF;

    /* ---------- Motion ---------- */
    --duration-instant: 0ms;
    --duration-fast:    150ms;
    --duration-medium:  250ms;
    --duration-slow:    330ms;
    --duration-slower:  420ms;
    --duration-long:    500ms;
    --duration-hero:    750ms;

    --easing-default: ease-in-out;
    --easing-sharp:   cubic-bezier(0.645, 0.045, 0.355, 1);
    --easing-smooth:  cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --easing-lazy-in: cubic-bezier(0.49, 0.14, 0.54, 0.9);
    --easing-reveal:  cubic-bezier(0.57, 0.24, 0.39, 0.88);

    /* ---------- Breakpoints (documentation only; media queries below) ---------- */
    --bp-xs:  480px;
    --bp-sm:  600px;
    --bp-md:  768px;
    --bp-lg:  980px;
    --bp-xl:  1024px;
    --bp-2xl: 1200px;
}

/*
 * Reduced-motion override: zeroes every transition / animation duration
 * so users who request reduced motion see an instantaneous UI.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast:    0ms;
        --duration-medium:  0ms;
        --duration-slow:    0ms;
        --duration-slower:  0ms;
        --duration-long:    0ms;
        --duration-hero:    0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
}