/* ============================================================================
   ELTINE — Design Tokens
   Cascade:  brand (primitives) → alias → mapped (roles) → type → layout
   Theming:  :root = Light · [data-theme-section="dark"] = Dark
   ----------------------------------------------------------------------------
   Accent rationale: signal yellow is the ISO colour of electrical caution and
   the colour of measurement instruments. ELTINE is "elektroinštalacije IN
   MERITVE" — the accent carries the second half of the name. It is also the
   only high-legibility accent on black, which is what the workwear demands.
   ============================================================================ */

:root {
  /* ---- BRAND · color · signal (primary accent) ---------------------------- */
  --brand-signal-50: #fffbe5;
  --brand-signal-100: #fff3b8;
  --brand-signal-200: #ffe97f;
  --brand-signal-300: #ffe04d;
  --brand-signal-400: #ffd923;
  --brand-signal-500: #ffd200; /* ← the brand colour */
  --brand-signal-600: #e5bd00;
  --brand-signal-700: #b89700;
  --brand-signal-800: #8a7100;
  --brand-signal-900: #5c4b00;

  /* ---- BRAND · color · graphite ------------------------------------------- */
  --brand-grey-050: #fafafa;
  --brand-grey-100: #f2f2f1;
  --brand-grey-150: #e6e6e4;
  --brand-grey-200: #cfcfcc;
  --brand-grey-250: #b8b8b4;
  --brand-grey-300: #a1a19d;
  --brand-grey-400: #8a8a86;
  --brand-grey-500: #6e6e6b;
  --brand-grey-600: #4a4a48;
  --brand-grey-700: #2e2e2d;
  --brand-grey-750: #232322;
  --brand-grey-800: #191918;
  --brand-grey-850: #131312;
  --brand-grey-900: #0a0a09;
  --brand-grey-100-alpha: #f2f2f11a;
  --brand-grey-900-alpha: #0a0a091a;

  /* ---- BRAND · scale (em — Osmo fluid system) ----------------------------- */
  --brand-scale-0: 0em;
  --brand-scale-25: 0.0625em;
  --brand-scale-50: 0.125em;
  --brand-scale-100: 0.25em;
  --brand-scale-200: 0.5em;
  --brand-scale-300: 0.75em;
  --brand-scale-400: 1em;
  --brand-scale-500: 1.25em;
  --brand-scale-600: 1.5em;
  --brand-scale-700: 1.75em;
  --brand-scale-800: 2em;
  --brand-scale-900: 2.5em;
  --brand-scale-1000: 3em;
  --brand-scale-1100: 4em;
  --brand-scale-1200: 5em;
  --brand-scale-1300: 6.25em;
  --brand-scale-1400: 8.25em;
  --brand-scale-1500: 10.25em;

  /* ---- BRAND · type primitives -------------------------------------------- */
  --brand-font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand-weight-light: 300;
  --brand-weight-regular: 400;
  --brand-weight-medium: 500;
  --brand-weight-semibold: 600;
  --brand-weight-bold: 700;

  /* ---- ALIAS · brand → signal --------------------------------------------- */
  --alias-brand-50: var(--brand-signal-50);
  --alias-brand-100: var(--brand-signal-100);
  --alias-brand-200: var(--brand-signal-200);
  --alias-brand-300: var(--brand-signal-300);
  --alias-brand-400: var(--brand-signal-400);
  --alias-brand-500: var(--brand-signal-500);
  --alias-brand-600: var(--brand-signal-600);
  --alias-brand-700: var(--brand-signal-700);
  --alias-brand-800: var(--brand-signal-800);
  --alias-brand-900: var(--brand-signal-900);

  /* ---- ALIAS · grey ------------------------------------------------------- */
  --alias-grey-050: var(--brand-grey-050);
  --alias-grey-100: var(--brand-grey-100);
  --alias-grey-150: var(--brand-grey-150);
  --alias-grey-200: var(--brand-grey-200);
  --alias-grey-250: var(--brand-grey-250);
  --alias-grey-300: var(--brand-grey-300);
  --alias-grey-400: var(--brand-grey-400);
  --alias-grey-500: var(--brand-grey-500);
  --alias-grey-600: var(--brand-grey-600);
  --alias-grey-700: var(--brand-grey-700);
  --alias-grey-750: var(--brand-grey-750);
  --alias-grey-800: var(--brand-grey-800);
  --alias-grey-850: var(--brand-grey-850);
  --alias-grey-900: var(--brand-grey-900);

  /* ---- MAPPED · text ------------------------------------------------------ */
  --mapped-text-headings-inverse: var(--alias-grey-100);
  --mapped-text-body-light: var(--alias-grey-500);
  --mapped-text-body-inverse: var(--alias-grey-200);
  --mapped-text-on-action: var(--alias-grey-900);
  --mapped-text-action: var(--alias-brand-700);
  --mapped-text-action-hover: var(--alias-brand-800);
  --mapped-text-disabled: var(--alias-grey-400);
  --mapped-text-error: #d92020;
  --mapped-text-success: #2f8f3f;

  /* ---- MAPPED · surface --------------------------------------------------- */
  --mapped-surface-dark: var(--alias-grey-800);
  --mapped-surface-action: var(--alias-brand-500);
  --mapped-surface-action-hover: var(--alias-brand-400);
  --mapped-surface-light-150: var(--alias-grey-150);
  --mapped-surface-light-200: var(--alias-grey-200);
  --mapped-surface-disabled: var(--alias-grey-200);
  --mapped-surface-transparent-black: var(--brand-grey-900-alpha);
  --mapped-surface-transparent-white: var(--brand-grey-100-alpha);
  --mapped-surface-error: #ffe3e3;
  --mapped-surface-success: #e2f5e6;

  /* ---- MAPPED · border ---------------------------------------------------- */
  --mapped-border-action: var(--alias-brand-600);
  --mapped-border-action-hover: var(--alias-brand-700);
  --mapped-border-inverse: var(--alias-grey-700);
  --mapped-border-on-200: var(--alias-grey-300);
  --mapped-border-disabled: var(--alias-grey-200);
  --mapped-border-error: #d92020;

  /* ---- MAPPED · icon ------------------------------------------------------ */
  --mapped-icon-inverse: var(--alias-grey-100);
  --mapped-icon-action: var(--alias-brand-500);
  --mapped-icon-action-hover: var(--alias-brand-400);
  --mapped-icon-on-action: var(--alias-grey-900);
  --mapped-icon-disabled: var(--alias-grey-400);

  /* ---- MAPPED · padding --------------------------------------------------- */
  --mapped-padding-none: var(--brand-scale-0);
  --mapped-padding-xxs: var(--brand-scale-200);
  --mapped-padding-xs: var(--brand-scale-400);
  --mapped-padding-sm: var(--brand-scale-800);
  --mapped-padding-md: var(--brand-scale-1100);
  --mapped-padding-lg: var(--brand-scale-1200);
  --mapped-padding-xl: var(--brand-scale-1500);

  /* ---- MAPPED · radius — square. Always. ---------------------------------- */
  --mapped-radius-none: 0em;
  --mapped-radius-sm: 0em;
  --mapped-radius-md: 0em;

  /* ---- MAPPED · border-width ---------------------------------------------- */
  --mapped-border-width-none: 0em;
  --mapped-border-width-sm: 0.0625em;
  --mapped-border-width-md: 0.125em;
  --mapped-border-width-lg: 0.25em;

  /* ---- MAPPED · theme (Light defaults — Dark overrides below) ------------- */
  --mapped-text-headings: var(--alias-grey-900);
  --mapped-text-body: var(--alias-grey-600);
  --mapped-surface-page: var(--alias-grey-100);
  --mapped-surface-default: var(--alias-grey-100);
  --mapped-border-default: var(--alias-grey-200);
  --mapped-icon-default: var(--alias-grey-600);

  /* ---- TYPE · size + line-height (line-height unitless ratio) ------------- */
  --type-display-md-size: 6em;
  --type-display-md-lh: 0.94;
  --type-display-sm-size: 4.75em;
  --type-display-sm-lh: 0.96;
  --type-h1-size: 3.75em;
  --type-h1-lh: 0.95;
  --type-h2-size: 3em;
  --type-h2-lh: 1.02;
  --type-h3-size: 2.5em;
  --type-h3-lh: 1.04;
  --type-h4-size: 2em;
  --type-h4-lh: 1.12;
  --type-h5-size: 1.5em;
  --type-h5-lh: 1.17;
  --type-h6-size: 1.2em;
  --type-h6-lh: 1.25;
  --type-paragraph-lg-size: 1.25em;
  --type-paragraph-lg-lh: 1.35;
  --type-paragraph-md-size: 1em;
  --type-paragraph-md-lh: 1.5;
  --type-paragraph-sm-size: 0.875em;
  --type-paragraph-sm-lh: 1.55;
  --type-paragraph-xsm-size: 0.75em;
  --type-paragraph-xsm-lh: 1.45;
  --type-eyebrow-size: 0.6875em;
  --type-eyebrow-lh: 1.2;

  /* ---- LAYOUT ------------------------------------------------------------- */
  --layout-nav-height: 4.375em;
  --layout-section-viewport: calc(100svh - var(--layout-nav-height));
}

/* ============================================================================
   Dark theme — overrides the six theme-mapped tokens. Driven by the
   data-theme-section attribute. "hero" is a visually dark section that uses
   the same dark token set; only its nav treatment differs.
   ============================================================================ */
[data-theme-section="dark"],
[data-theme-section="hero"] {
  --mapped-text-headings: var(--alias-grey-100);
  --mapped-text-body: var(--alias-grey-250);
  --mapped-text-body-light: var(--alias-grey-400);
  --mapped-surface-page: var(--alias-grey-900);
  --mapped-surface-default: var(--alias-grey-900);
  --mapped-border-default: var(--alias-grey-700);
  --mapped-icon-default: var(--alias-grey-100);
}

/* Signal section — full-bleed yellow. Used exactly once per page, maximum. */
[data-theme-section="signal"] {
  --mapped-text-headings: var(--alias-grey-900);
  --mapped-text-body: var(--alias-grey-800);
  --mapped-text-body-light: var(--alias-grey-700);
  --mapped-surface-page: var(--alias-brand-500);
  --mapped-surface-default: var(--alias-brand-500);
  --mapped-border-default: var(--alias-grey-900);
  --mapped-icon-default: var(--alias-grey-900);
  --mapped-surface-action: var(--alias-grey-900);
  --mapped-surface-action-hover: var(--alias-grey-700);
  --mapped-text-on-action: var(--alias-brand-500);

  /* --button-* se razrešijo na :root, zato jih preglasitev odseka ne doseže
     sama od sebe. Brez teh štirih vrstic gumb v barvnem odseku izgubi
     podlago in ostane samo besedilo. */
  --button-color: var(--alias-brand-500);
  --button-color-background: var(--alias-grey-900);
  --button-hover-color: var(--alias-brand-500);
  --button-hover-color-background: var(--alias-grey-700);
}

/* ============================================================================
   MOBILE — proportional reduction of brand-scale below 767px.
   brand-scale is the single root of all spacing, so overriding it here
   compresses the entire site's rhythm in one place. Type: only h1–h4 and
   display shrink; body, h5, h6 and eyebrow keep their desktop size because
   they are already at the readable minimum.
   ============================================================================ */
@media screen and (max-width: 767px) {
  :root {
    --brand-scale-200: 0.375em;
    --brand-scale-300: 0.5em;
    --brand-scale-400: 0.625em;
    --brand-scale-500: 0.75em;
    --brand-scale-600: 0.875em;
    --brand-scale-700: 0.9375em;
    --brand-scale-800: 1em; /* ← anchor: container horizontal padding */
    --brand-scale-900: 1.25em;
    --brand-scale-1000: 1.5em;
    --brand-scale-1100: 2em;
    --brand-scale-1200: 2.5em;
    --brand-scale-1300: 3em;
    --brand-scale-1400: 3.75em;
    --brand-scale-1500: 4.5em;

    --type-display-md-size: 3.4em;
    --type-display-sm-size: 2.9em;
    --type-h1-size: 2.2em;
    --type-h2-size: 2em;
    --type-h3-size: 1.75em;
    --type-h4-size: 1.5em;
  }
}