/* ============================================================================
   ELTINE — predoglednе teme

   GENERIRANO. Ne urejaj ročno in ne dopisuj na konec — poženi
   `python3 build_themes.py`, ki datoteko vsakič prepiše v celoti.
   Slog preklopnika je zato v css/preview.css, ne tu.

   Barve in pisave so tu ločene od oblikovnega sistema, ker so predogled za
   naročnika, ne del znamke. Ko bo izbira sprejeta, se zmagovalna vrednost
   prepiše v tokens.css, ta datoteka in preklopnik pa gresta stran.
   ============================================================================ */

/* ---- Modra — #4A91BA ---- */
[data-accent="modra"] {
  --brand-signal-50: #E5EAED;
  --brand-signal-100: #CDDDE5;
  --brand-signal-200: #ABC9DA;
  --brand-signal-300: #8AB6CF;
  --brand-signal-400: #68A2C4;
  --brand-signal-500: #4A91BA;
  --brand-signal-600: #417EA1;
  --brand-signal-700: #366681;
  --brand-signal-800: #294B5E;
  --brand-signal-900: #1D323E;
  --mapped-text-on-action: #0A0A09;
  --mapped-surface-action-hover: #8AB6CF;
  --mapped-text-action: #3C7393;
  --mapped-text-action-hover: #294B5E;
  --button-color: #0A0A09;
  --button-color-background: #4A91BA;
  --button-hover-color: #0A0A09;
  --button-hover-color-background: #8AB6CF;
}
[data-accent="modra"] [data-theme-section="dark"] .is-accent,
[data-accent="modra"] [data-theme-section="hero"] .is-accent { color: #4A91BA; }
[data-accent="modra"] .button:is(:hover, :focus-visible) .button__hover { color: #0A0A09; }
[data-accent="modra"] [data-theme-section="signal"] {
  --mapped-text-headings: #0A0A09;
  --mapped-text-body: #0A0A09;
  --mapped-text-body-light: #1D323E;
  --mapped-border-default: #325E77;
  --mapped-icon-default: #0A0A09;
  --mapped-surface-action: #0A0A09;
  --mapped-surface-action-hover: #182830;
  --mapped-text-on-action: #4A91BA;
  --button-color: #4A91BA;
  --button-color-background: #0A0A09;
  --button-hover-color: #4A91BA;
  --button-hover-color-background: #182830;
}
[data-accent="modra"] [data-theme-section="signal"] .annotation_dot { background-color: #0A0A09; }
[data-accent="modra"] [data-theme-section="signal"] .eyebrow_bracket { border-color: #0A0A09; }
[data-accent="modra"] .nav_cta { background-color: #4A91BA; color: #0A0A09; }
[data-accent="modra"] .nav_cta:hover { background-color: #8AB6CF; color: #0A0A09; }

/* ---- Vijolična — #6E558D ---- */
[data-accent="vijolicna"] {
  --brand-signal-50: #E7E5E9;
  --brand-signal-100: #D5CFDB;
  --brand-signal-200: #BBB0C7;
  --brand-signal-300: #A091B3;
  --brand-signal-400: #86719F;
  --brand-signal-500: #6E558D;
  --brand-signal-600: #604A7B;
  --brand-signal-700: #4E3D63;
  --brand-signal-800: #3A2E48;
  --brand-signal-900: #282031;
  --mapped-text-on-action: #F2F2F1;
  --mapped-surface-action-hover: #A091B3;
  --mapped-text-action: #6E558D;
  --mapped-text-action-hover: #3A2E48;
  --button-color: #F2F2F1;
  --button-color-background: #6E558D;
  --button-hover-color: #0A0A09;
  --button-hover-color-background: #A091B3;
}
[data-accent="vijolicna"] [data-theme-section="dark"] .is-accent,
[data-accent="vijolicna"] [data-theme-section="hero"] .is-accent { color: #A091B3; }
[data-accent="vijolicna"] .button:is(:hover, :focus-visible) .button__hover { color: #0A0A09; }
[data-accent="vijolicna"] [data-theme-section="signal"] {
  --mapped-text-headings: #F2F2F1;
  --mapped-text-body: #F2F2F1;
  --mapped-text-body-light: #CAC3D3;
  --mapped-border-default: #A091B3;
  --mapped-icon-default: #F2F2F1;
  --mapped-surface-action: #F2F2F1;
  --mapped-surface-action-hover: #D5CFDB;
  --mapped-text-on-action: #6E558D;
  --button-color: #6E558D;
  --button-color-background: #F2F2F1;
  --button-hover-color: #6E558D;
  --button-hover-color-background: #D5CFDB;
}
[data-accent="vijolicna"] [data-theme-section="signal"] .annotation_dot { background-color: #F2F2F1; }
[data-accent="vijolicna"] [data-theme-section="signal"] .eyebrow_bracket { border-color: #F2F2F1; }
[data-accent="vijolicna"] .nav_cta { background-color: #6E558D; color: #F2F2F1; }
[data-accent="vijolicna"] .nav_cta:hover { background-color: #A091B3; color: #0A0A09; }

/* ---- Bledo rumena — #F9EC78 ---- */
[data-accent="bledorumena"] {
  --brand-signal-50: #F3F2E7;
  --brand-signal-100: #F4F1D6;
  --brand-signal-200: #F5EFBE;
  --brand-signal-300: #F6EEA6;
  --brand-signal-400: #F8ED8E;
  --brand-signal-500: #F9EC78;
  --brand-signal-600: #D8CC68;
  --brand-signal-700: #ADA454;
  --brand-signal-800: #7D763E;
  --brand-signal-900: #524E2A;
  --mapped-text-on-action: #0A0A09;
  --mapped-surface-action-hover: #F8ED8E;
  --mapped-text-action: #76703B;
  --mapped-text-action-hover: #7D763E;
  --button-color: #0A0A09;
  --button-color-background: #F9EC78;
  --button-hover-color: #0A0A09;
  --button-hover-color-background: #F8ED8E;
}
[data-accent="bledorumena"] [data-theme-section="dark"] .is-accent,
[data-accent="bledorumena"] [data-theme-section="hero"] .is-accent { color: #F9EC78; }
[data-accent="bledorumena"] .button:is(:hover, :focus-visible) .button__hover { color: #0A0A09; }
[data-accent="bledorumena"] [data-theme-section="signal"] {
  --mapped-text-headings: #0A0A09;
  --mapped-text-body: #0A0A09;
  --mapped-text-body-light: #524E2A;
  --mapped-border-default: #9E964E;
  --mapped-icon-default: #0A0A09;
  --mapped-surface-action: #0A0A09;
  --mapped-surface-action-hover: #3F3C21;
  --mapped-text-on-action: #F9EC78;
  --button-color: #F9EC78;
  --button-color-background: #0A0A09;
  --button-hover-color: #F9EC78;
  --button-hover-color-background: #3F3C21;
}
[data-accent="bledorumena"] [data-theme-section="signal"] .annotation_dot { background-color: #0A0A09; }
[data-accent="bledorumena"] [data-theme-section="signal"] .eyebrow_bracket { border-color: #0A0A09; }
[data-accent="bledorumena"] .nav_cta { background-color: #F9EC78; color: #0A0A09; }
[data-accent="bledorumena"] .nav_cta:hover { background-color: #F8ED8E; color: #0A0A09; }

/* ---- Space Grotesk + JetBrains Mono ---- */
/* [data-type="a"] — privzeto, brez preglasitev */

/* ---- Bebas Neue + Open Sans ---- */
[data-type="b"] {
  --brand-font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --brand-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
[data-type="b"] h1, [data-type="b"] h2, [data-type="b"] h3,
[data-type="b"] h4, [data-type="b"] h5, [data-type="b"] h6,
[data-type="b"] .heading_display-large, [data-type="b"] .heading_display-small,
[data-type="b"] .heading_h1, [data-type="b"] .heading_h2, [data-type="b"] .heading_h3,
[data-type="b"] .heading_h4, [data-type="b"] .heading_h5, [data-type="b"] .heading_h6 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.94;
}
[data-type="b"] { --type-h1-size: 4.6em; --type-h2-size: 3.7em; --type-h3-size: 3em;
  --type-h4-size: 2.4em; --type-h5-size: 1.8em; --type-h6-size: 1.4em;
  --type-display-md-size: 7em; --type-display-sm-size: 5.6em; }
@media screen and (max-width: 767px) {
  [data-type="b"] { --type-h1-size: 2.8em; --type-h2-size: 2.5em; --type-h3-size: 2.1em;
    --type-h4-size: 1.8em; --type-display-md-size: 4.2em; --type-display-sm-size: 3.5em; }
}

/* ---- Oswald + Playfair Display ---- */
[data-type="c"] {
  --brand-font-family: 'Playfair Display', Georgia, serif;
  --brand-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
[data-type="c"] h1, [data-type="c"] h2, [data-type="c"] h3,
[data-type="c"] h4, [data-type="c"] h5, [data-type="c"] h6,
[data-type="c"] .heading_display-large, [data-type="c"] .heading_display-small,
[data-type="c"] .heading_h1, [data-type="c"] .heading_h2, [data-type="c"] .heading_h3,
[data-type="c"] .heading_h4, [data-type="c"] .heading_h5, [data-type="c"] .heading_h6 {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.06;
}
/* Playfair je visokokontrastna serifna — v tekočem besedilu potrebuje
   več prostora med vrsticami, sicer se lasni potezi zlijejo. */
[data-type="c"] .text_size-small, [data-type="c"] .text_size-medium,
[data-type="c"] .text_size-large, [data-type="c"] .prose p, [data-type="c"] .prose li {
  line-height: 1.7;
}
[data-type="c"] { --type-h1-size: 4em; --type-h2-size: 3.2em;
  --type-display-md-size: 6.2em; --type-paragraph-sm-size: 0.9em; }
@media screen and (max-width: 767px) {
  [data-type="c"] { --type-h1-size: 2.4em; --type-h2-size: 2.2em; --type-display-md-size: 3.6em; }
}