/* CyberSec 2026 arculat -- design tokenek.
   Egyetlen forrás: az arculati kézikönyv (redesign/CyberSec weboldal design_v2.pdf).
   Minden további CSS ezekre a változókra hivatkozik, nyers hexát nem használ. */

/* ---------------------------------------------------------------- betűtípusok
   A Montserrat 400/700 .ttf már megvolt, az 500/600 woff2-t a
   static/webfonts/README.md szerint kell bemásolni. Amíg nincs meg, a `src`
   második eleme (a régi .ttf) tartja a helyét: az 500 a Regularra, a 600 a
   Boldra esik vissza -- nem rendszer-betűre. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/webfonts/Montserrat-Regular.woff2') format('woff2'),
       url('/static/webfonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/webfonts/Montserrat-Medium.woff2') format('woff2'),
       url('/static/webfonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/webfonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('/static/webfonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/webfonts/Montserrat-Bold.woff2') format('woff2'),
       url('/static/webfonts/Montserrat-Bold.ttf') format('truetype');
}

/* A mottó betűje: a v2 főoldalterv kurzív antikvát ír a korábbi kalligrafikus
   (Pinyon Script) helyett -- csak a dőlt vágat van meg, mást nem is használunk. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/webfonts/InstrumentSerif-Italic.woff2') format('woff2');
}

:root {
  /* ------------------------------------------------------------- alapszínek */
  --c-ivory: #f4efe1;          /* meleg ivory -- fő háttér */
  --c-navy: #0a1b31;           /* éjkék -- címszöveg, elsődleges gomb */
  --c-deep: #040b18;           /* mélykék -- a csíkok kifutása */
  --c-gold: #b99a5e;           /* arany -- vonalak, keretek, csíkozás */
  --c-gold-strong: #b08a44;    /* arany kiemelés nagy méretben, sötét háttéren */
  --c-gold-light: #e4ce9b;     /* világos arany -- CSAK mélykéken (címlap, sávok) */

  /* ------------------------------------------------------------ szövegszín
     Az ivory hátterű szövegek WCAG AA-t (4.5:1) tartanak. A kézikönyv
     #7C7364 / #B08A44 párosa 4,07:1 illetve 2,78:1 -- kis méretű szövegre
     kevés, ezért az `--c-ink-*` és `--c-gold-ink` sötétített változatot ad;
     a dekoratív (nem szöveg) elemek maradnak a kézikönyv árnyalatán. */
  --c-ink: var(--c-navy);      /* címek ivory-n           15,06:1 */
  --c-ink-body: #4a5060;       /* törzsszöveg ivory-n      7,01:1 */
  --c-ink-muted: #6e6759;      /* harmadlagos szöveg       4,93:1 */
  --c-gold-ink: #7f6331;       /* arany SZÖVEG ivory-n     4,90:1 */

  --c-on-dark: var(--c-ivory);       /* szöveg mélykéken   17,15:1 */
  --c-on-dark-muted: #9c9384;        /* meta mélykéken      6,49:1 */
  --c-gold-on-dark: var(--c-gold-light); /* arany SZÖVEG mélykéken  11,44:1 */
  --c-on-gold: var(--c-deep);        /* arany gomb felirata 7,36:1 */

  /* ------------------------------------------------------ vonalak, keretek */
  --c-rule: #d2c9b6;                       /* 1px felsorolás-elválasztó */
  --c-rule-gold: var(--c-gold);            /* 1px szekció- és névválasztó */
  --c-rule-on-dark: rgb(185 154 94 / 0.32);
  --c-border: rgb(10 27 49 / 0.14);        /* kártya/keret ivory-n */
  --c-surface-sunken: rgb(10 27 49 / 0.035);
  --w-rule-active: 3px;                    /* aktív fül jelölése */

  /* -------------------------------------------------- csíkos kék felületek
     38°-os arany csíkháló 13px osztással, felette függőleges átmenet: a
     csíkok felül élesek, alul teljesen beolvadnak a mélykékbe. */
  --stripe-color: rgb(185 154 94 / 0.32);
  --stripe-gap: 13px;
  --stripe-angle: 38deg;
  --stripe-hatch: repeating-linear-gradient(
      var(--stripe-angle),
      var(--stripe-color) 0 1px,
      transparent 1px var(--stripe-gap));
  --stripe-base: linear-gradient(160deg, var(--c-navy), var(--c-deep));
  /* fejléc + címlap: a csíkok lefelé olvadnak be */
  --surface-striped:
      linear-gradient(180deg, rgb(4 11 24 / 0) 35%, var(--c-deep) 100%),
      var(--stripe-hatch),
      var(--stripe-base);
  /* önálló sötét sáv (a főoldali „Zártkörű esemény / Kibernaptár"): a csíkok
     végig egyenletesek, mert a sávnak nincs hova beolvadnia */
  --surface-striped-band:
      var(--stripe-hatch),
      var(--stripe-base);

  /* ------------------------------------------------------------ tipográfia */
  --font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-script: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --fw-body: 400;      /* szövegtörzs */
  --fw-medium: 500;    /* programelem */
  --fw-semi: 600;      /* szekciócím és név */
  --fw-bold: 700;      /* főcím */

  /* A lépcső a mockup arányait követi (törzs = 1rem): H1 5x, H2 2,2x. */
  --fs-display: clamp(2.75rem, 7vw, 5rem);
  --fs-h1: clamp(2rem, 5vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.1875rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-label: 0.8125rem;   /* kiskapitális címke */
  --fs-micro: 0.75rem;

  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* Kiskapitális hatás: minden címke, menü, dátum, terem és típusjelölés. */
  --ls-label: 0.12em;
  --ls-nav: 0.1em;
  --ls-display: -0.01em;

  /* --------------------------------------------------------------- ritmus */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;

  /* Az arculat szögletes: a gombok, kártyák, képek éle vágott. */
  --radius: 0;
  --radius-pill: 999px;

  --shadow-lift: 0 10px 30px rgb(4 11 24 / 0.12);
  --shadow-dark: 0 12px 32px rgb(4 11 24 / 0.35);

  --dur-fast: 140ms;
  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);

  --focus-ring: 2px solid var(--c-gold-strong);
  --focus-offset: 3px;

  /* A Bootstrap (modal, űrlapelemek) is az arculatot vegye fel. */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--c-ink-body);
  --bs-body-bg: var(--c-ivory);
  --bs-border-radius: var(--radius);
  --bs-link-color: var(--c-gold-ink);
  --bs-link-hover-color: var(--c-navy);
  --bs-focus-ring-color: rgb(176 138 68 / 0.35);
}