/* ============================================================
   Design tokens — single source of truth for the Prodez site.
   Load before all other component stylesheets.
   ============================================================ */

:root {
    /* Brand palette */
    --color-navy:          #2D3142;   /* primary dark: nav, headings, dark buttons */
    --color-red:           #DD3519;   /* call-to-action, hover indicators, focus rings */
    --color-red-dark:      #c42e14;   /* CTA hover, submenu CTA hover */
    --color-red-rgb:       221, 53, 25;  /* same red as channels, for rgba() shadows */
    --color-yellow:        #FABE00;   /* promotional banner */
    --color-yellow-hover:  #e6bc00;   /* yellow CTA hover */
    --color-telegram:      #0088cc;   /* Telegram channel button */
    --color-telegram-dark: #0079b8;   /* Telegram hover state */

    /* Surfaces */
    --color-surface:       #ffffff;   /* header, submenus, mobile drawer */
    --color-surface-off:   #F3F3F2;   /* info bar, secondary panel */
    --color-surface-muted: #f5f5f5;   /* submenu CTA column, mobile accordion */

    /* Text — one ramp, light surfaces first, then type that sits on dark ones.
       Headings use --color-navy; everything below is the neutral supporting scale. */
    --color-text:          #414141;   /* secondary labels, info bar */
    --color-text-muted:    #666666;   /* body copy: lede, card text, descriptions */
    --color-text-subtle:   #808080;   /* meta type (schedules, notes); active-state indicators */
    --color-text-inverse:  #ffffff;   /* type — and the focus ring that frames it — on dark
                                         surfaces and on brand-colored buttons */
    --color-text-inverse-muted: #ABABAB;  /* secondary type on dark (breadcrumb links) —
                                             lighter than --color-text-subtle on purpose:
                                             #808080 on navy is 3.2:1, this is 5.6:1 */

    /* Borders */
    --color-border:        #eeeeee;   /* fine rule (header-top bottom border) */
    --color-border-mid:    #e0e0e0;   /* column separators, list dividers */

    /* Layout */
    /* Fallback close to the real measured desktop header (~208px) so the hero
       sits flush before JS measures it. JS refines to the exact px; breakpoint
       overrides for the shorter mobile/tablet header live in header.css. */
    --header-height:       220px;     /* refined dynamically by JS (real desktop header ~221px) */
    --header-gutter:       60px;      /* horizontal padding shared by logo and nav */

    /* Hero — photo-led, dark-type-on-bright-photo. */
    /* The photo IS the surface; tokens here describe type colors that read on it. */
    --hero-ink:            oklch(0.22 0.020 274);    /* deep navy headlines, dark on photo's bright corridor */
    --hero-ink-muted:      oklch(0.38 0.018 274);    /* secondary text */
    --hero-ink-faint:      oklch(0.50 0.015 274);    /* meta type — trust strip, kicker */

    /* Light, elevated surface used by the popular-requests quicknav. */
    --hero-quicknav-surface: oklch(0.985 0.004 274);
    --hero-quicknav-card: oklch(0.995 0.002 274);
    --hero-quicknav-card-hover: oklch(0.975 0.010 35);
    --hero-quicknav-border: oklch(0.91 0.008 274);
    --hero-quicknav-shadow: oklch(0.24 0.020 274 / 0.13);
    --hero-quicknav-card-shadow: oklch(0.24 0.020 274 / 0.09);

    --hero-accent:         var(--color-red);
    --hero-accent-hover:   var(--color-red-dark);
    --hero-accent-ink:     oklch(0.985 0.004 85);    /* type on red CTA */
}