/* BYSEC s.r.o. — Design System Tokens
   Source of truth: Cenová ponuka cover page + bysec.sk
   Palette derives from the navy/yellow "security" brand identity.

   Usage:  <link rel="stylesheet" href="../colors_and_type.css">
*/

/* ---------- LICENSED BRAND FONT — ROBOTO ---------- */
/* Roboto (all weights + italics, plus Condensed) is BYSEC's licensed display + body face.
   Files live in ./fonts/ and are referenced with relative URLs so @font-face resolves
   from any HTML that @imports this stylesheet via a sibling or parent path. */

@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Thin.ttf") format('truetype');          font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-ThinItalic.ttf") format('truetype');    font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Light.ttf") format('truetype');         font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-LightItalic.ttf") format('truetype');   font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Regular.ttf") format('truetype');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Italic.ttf") format('truetype');        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Medium.ttf") format('truetype');        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-MediumItalic.ttf") format('truetype');  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Bold.ttf") format('truetype');          font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-BoldItalic.ttf") format('truetype');    font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-Black.ttf") format('truetype');         font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url("fonts/Roboto-BlackItalic.ttf") format('truetype');   font-weight: 900; font-style: italic; font-display: swap; }

/* Roboto Condensed — wide-tracked uppercase eyebrow labels (SLUŽBY, etc.) */
@font-face { font-family: 'Roboto Condensed'; src: url("fonts/RobotoCondensed-Regular.ttf") format('truetype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url("fonts/RobotoCondensed-Italic.ttf") format('truetype');     font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url("fonts/RobotoCondensed-Bold.ttf") format('truetype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url("fonts/RobotoCondensed-BoldItalic.ttf") format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---------- COLOR — BRAND ---------- */
  --bysec-navy-900: #14202e;   /* deepest ink — headings on yellow */
  --bysec-navy-800: #1f2d3f;   /* primary dark surface (quote block) */
  --bysec-navy-700: #2a3a50;   /* dark surface alt */
  --bysec-navy-600: #3e4d63;   /* muted navy / logo mark body */

  --bysec-yellow-500: #f4c752; /* primary accent — chevron motif */
  --bysec-yellow-400: #f7d472; /* softer yellow fill */
  --bysec-yellow-300: #fbe29a; /* pale yellow wash / info cards */
  --bysec-yellow-200: #fdf2d6; /* cream tint — page backgrounds */

  --bysec-blue-600: #2b4a7a;   /* footer / CTA navy-blue */
  --bysec-blue-500: #3e609a;   /* link + action blue */
  --bysec-blue-300: #8ea6c8;   /* soft blue (palette swatch) */

  /* Secondary — from the supplied BYSEC palette swatch */
  --bysec-sage-500: #6e9888;   /* sage green — secondary */
  --bysec-teal-500: #6ba8a5;   /* teal — tertiary accent */
  --bysec-gray-500: #8a8a8a;   /* neutral mid */

  /* ---------- COLOR — NEUTRALS ---------- */
  --bysec-ink:     #14202e;
  --bysec-fg-1:    #1f2d3f;   /* primary text */
  --bysec-fg-2:    #4a5668;   /* secondary text */
  --bysec-fg-3:    #7a8596;   /* tertiary / captions */
  --bysec-fg-muted:#a6afbc;
  --bysec-bg:      #ffffff;
  --bysec-bg-alt:  #f6f7f9;   /* app shell background */
  --bysec-bg-cream:#fdf9ee;   /* cream panels (matches cover) */
  --bysec-border:  #e3e6ec;
  --bysec-border-strong: #c9cfd8;
  --bysec-hairline: #edeff3;

  /* ---------- COLOR — SEMANTIC ---------- */
  --bysec-success: #4a9b6e;
  --bysec-warning: #e5a53a;
  --bysec-danger:  #c94a4a;
  --bysec-info:    var(--bysec-blue-500);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Roboto Condensed', 'Roboto', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-display:   56px;
  --fs-h1:        40px;
  --fs-h2:        30px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-caption:   11px;
  --fs-eyebrow:   12px;  /* "S L U Ž B Y" wide-tracked label */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --ls-eyebrow: 0.28em;
  --ls-caps:    0.06em;

  /* ---------- RADII ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(20,32,46,0.06), 0 1px 1px rgba(20,32,46,0.04);
  --shadow-md: 0 4px 12px rgba(20,32,46,0.08), 0 2px 4px rgba(20,32,46,0.04);
  --shadow-lg: 0 12px 32px rgba(20,32,46,0.12), 0 4px 10px rgba(20,32,46,0.06);
  --shadow-focus: 0 0 0 3px rgba(244,199,82,0.45);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;
}

/* ---------- SEMANTIC DEFAULTS ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bysec-fg-1);
  background: var(--bysec-bg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;     /* BYSEC cover uses light display weight */
  line-height: var(--lh-tight);
  color: var(--bysec-ink);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--bysec-ink);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--bysec-fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--bysec-fg-1);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bysec-fg-2);
}
.caption { font-size: var(--fs-caption); color: var(--bysec-fg-3); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- BRAND MOTIF HELPERS ---------- */
.bysec-chevron-bg {
  /* Diagonal yellow chevron motif from the Cenová ponuka cover */
  background-image:
    linear-gradient(115deg, transparent 55%, var(--bysec-yellow-400) 55% 62%, transparent 62% 68%, var(--bysec-yellow-500) 68% 78%, transparent 78%);
}
.bysec-hatched {
  background-image: repeating-linear-gradient(45deg,
    var(--bysec-navy-800) 0 1px, transparent 1px 5px);
}
.bysec-rule-yellow { width: 160px; height: 4px; background: var(--bysec-yellow-500); }