/* ==========================================================================
   POS-cashservice — Colors & Type foundations
   Brand: German payment-terminal rental for SME merchants.
   Two-color system: corporate orange + corporate blue, on white.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Subjectivity";
  src: url("../fonts/subjectivity-bold-webfont.woff2") format("woff2"),
       url("../fonts/subjectivity-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haskoy";
  src: url("../fonts/haskoy-light-webfont.woff2") format("woff2"),
       url("../fonts/haskoy-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haskoy";
  src: url("../fonts/haskoy-regular-webfont.woff2") format("woff2"),
       url("../fonts/haskoy-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haskoy";
  src: url("../fonts/haskoy-bold-webfont.woff2") format("woff2"),
       url("../fonts/haskoy-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand core ---------- */
  --pos-orange:      #F39200;  /* primary — logo "service", CTAs, icons      */
  --pos-blue:        #164194;  /* secondary — logo "POScash", headings, trust */

  /* ---------- Orange scale ---------- */
  --orange-50:   #FFF6E9;
  --orange-100:  #FEE9C7;
  --orange-200:  #FBD493;
  --orange-300:  #F8BB5A;
  --orange-400:  #F5A52C;
  --orange-500:  #F39200;  /* = --pos-orange */
  --orange-600:  #D67C00;
  --orange-700:  #AE6400;
  --orange-800:  #804900;

  /* ---------- Blue scale ---------- */
  --blue-50:    #EEF2FA;
  --blue-100:   #D3DEF1;
  --blue-200:   #A3B8E0;
  --blue-300:   #6E8ECC;
  --blue-400:   #3C63B3;
  --blue-500:   #164194;  /* = --pos-blue */
  --blue-600:   #12377E;
  --blue-700:   #0E2A5F;
  --blue-800:   #0A1E44;   /* deep navy — quote mark, footers */

  /* ---------- Neutrals (cool grey, tuned toward the blue) ---------- */
  --white:      #FFFFFF;
  --grey-50:    #F7F8FA;   /* section background tint */
  --grey-100:   #EEF0F4;   /* cards / hairline fills */
  --grey-200:   #DFE3EA;   /* borders */
  --grey-300:   #C4CAD6;   /* disabled borders */
  --grey-400:   #9AA2B1;   /* muted icons */
  --grey-500:   #6B7280;   /* secondary text */
  --grey-600:   #4B5563;
  --grey-700:   #353B47;
  --grey-900:   #1A1E27;   /* near-black body text */

  /* ---------- Semantic foreground ---------- */
  --fg-1:        var(--grey-900);   /* primary text */
  --fg-2:        var(--grey-500);   /* secondary / supporting text */
  --fg-3:        var(--grey-400);   /* tertiary / captions */
  --fg-brand:    var(--pos-blue);   /* headings, links */
  --fg-accent:   var(--pos-orange); /* emphasis, prices, CTAs */
  --fg-on-color: var(--white);      /* text on orange/blue fills */

  /* ---------- Semantic background ---------- */
  --bg-page:     var(--white);
  --bg-subtle:   var(--grey-50);
  --bg-muted:    var(--grey-100);
  --bg-brand:    var(--pos-blue);
  --bg-accent:   var(--pos-orange);
  --bg-footer:   var(--blue-800);

  /* ---------- Borders & lines ---------- */
  --border-1:    var(--grey-200);
  --border-2:    var(--grey-300);
  --border-strong: var(--pos-blue);

  /* ---------- Status ---------- */
  --success:     #1E9E5A;
  --success-bg:  #E4F4EB;
  --warning:     var(--pos-orange);
  --warning-bg:  var(--orange-50);
  --error:       #D23B3B;
  --error-bg:    #FBE9E9;
  --info:        var(--pos-blue);
  --info-bg:     var(--blue-50);

  /* ---------- Type families ---------- */
  --font-display: "Subjectivity", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body:    "Haskoy", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale (rem @ 16px base) ---------- */
  --text-xs:   0.75rem;   /* 12 — legal, captions          */
  --text-sm:   0.875rem;  /* 14 — labels, meta             */
  --text-base: 1rem;      /* 16 — body                     */
  --text-lg:   1.125rem;  /* 18 — lead paragraph           */
  --text-xl:   1.375rem;  /* 22 — card titles              */
  --text-2xl:  1.75rem;   /* 28 — H3                       */
  --text-3xl:  2.25rem;   /* 36 — H2                       */
  --text-4xl:  3rem;      /* 48 — H1                       */
  --text-5xl:  4rem;      /* 64 — hero display             */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* eyebrows / overlines */

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;   /* cards */
  --radius-xl:   24px;   /* hero panels, imagery */
  --radius-pill: 999px;  /* buttons, chips */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 30, 68, 0.06);
  --shadow-md: 0 6px 18px rgba(10, 30, 68, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 30, 68, 0.12);
  --shadow-orange: 0 10px 24px rgba(243, 146, 0, 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ==========================================================================
   Semantic element styles — apply to plain HTML or via the classes below.
   ========================================================================== */

.pos-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-brand);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .pos-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
}
h2, .pos-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
}
h3, .pos-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-brand);
}
h4, .pos-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.pos-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.pos-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

p, .pos-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

small, .pos-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.pos-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-3);
}

a, .pos-link {
  color: var(--pos-blue);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, .pos-link:hover { color: var(--pos-orange); }

.pos-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-accent);
  letter-spacing: var(--tracking-tight);
}