/* KredytOK design tokens. Loaded before main.css. Dark theme: body.high-contrast. */

:root {
  /* Brand (from Figma gradient tokens) */
  --kok-orange:      #ff8c00;   /* gradient-primary-1 */
  --kok-orange-600:  #e07d00;
  --kok-pink:        #ff0078;   /* gradient-primary-2 */
  --kok-pink-600:    #e0006b;
  --kok-yellow:      #ffff00;

  /* Neutrals */
  --kok-white:       #ffffff;
  --kok-black:       #000;
  --kok-gray-50:     #f5f6f6;
  --kok-gray-100:    #f2f2f2;
  --kok-gray-200:    #e6e6e6;
  --kok-gray-400:    #b0b0b0;
  --kok-gray-600:    #777777;
  --kok-gray-800:    #484848;
  --kok-black:       #1e1e1e;
  --kok-text:        #000000;
  --kok-subtext-200: #B4B6B7;
  --kok-subtext-500: #292d30;
  --kok-subtext-600: #222628;
  --kok-subtext-400: #626568;
  --kok-subtext-300: #919395;   /* Figma Subtext-400 (lighter grey copy) */

  --kok-dark-surface: #141618;  /* Figma Bg-grey-50 (dark) — tlo stopki w jasnym motywie */

  --kok-border:      #d4d5d6;
  --kok-border-200:  #b4b6b7;
  --kok-error:       #dc2323;
  --kok-success:     #1f9d55;

  --kok-gradient-brand: linear-gradient(270deg, var(--kok-pink) -6.14%, var(--kok-orange) 100%);
  --kok-gradient-links: linear-gradient(270deg, var(--kok-pink) 0%, var(--kok-orange) 100%);

  /* Semantic (light) */
  --color-bg:            var(--kok-white);
  --color-surface:       var(--kok-gray-50);
  --color-surface-alt:   var(--kok-gray-100);
  --color-border:        var(--kok-border);
  --color-text:          var(--kok-text);
  --color-text-body:     var(--kok-subtext-600);  /* Figma Subtext-600 — akapity/listy treści */
  --color-text-subtext:  var(--kok-subtext-200);
  --color-text-subtle:   var(--kok-subtext-500);
  --color-text-muted:    var(--kok-subtext-400);
  --color-text-invert:   var(--kok-white);
  --color-link:          var(--kok-pink);

  --btn-primary-bg:      var(--kok-gradient-brand);
  --btn-primary-text:    var(--kok-white);
  --btn-primary-bg-hover:linear-gradient(90deg, var(--kok-orange-600) 0%, var(--kok-pink-600) 100%);

  --color-accent:        var(--kok-pink);
  --color-accent-contrast: var(--kok-white);

  /* Typography (Montserrat). Sizes/line-heights from Figma text styles. */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  --fs-display: 61px;  --lh-display: 67px;   /* D1 — hero */
  --fs-h1:      34px;  --lh-h1:      41px;   /* H1 — section headings */
  --fs-h3:      25px;  --lh-h3:      31px;   /* H3 — naglowki sekcji (np. litery slownika) */
  --fs-h4:      22px;  --lh-h4:      29px;   /* H4 — tytuly sekcji formularza */
  --fs-lg:      19px;  --lh-lg:      28px;   /* large button label / lead */
  --fs-base:    16px;  --lh-base:    24px;   /* body / button label */
  --fs-sm:      14px;  --lh-sm:      21px;   /* body-small */
  --fs-caption: 12px;  --lh-caption: 18px;   /* caption */

  /* Spacing — padding scale (Figma "margin") */
  --space-xs: 8px;
  --margin-sm:  12px;
  --margin-md:  16px;
  --margin-lg:  20px;
  --margin-2xl: 32px;
  --margin-3xl: 36px;
  --margin-4xl: 48px;
  --margin-5xl: 64px;
  --margin-7xl: 120px;
  /* Gap scale (Figma "spacings") */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  36px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px rgba(30, 30, 30, 0.08);
  --transition:  0.2s ease;

  /* Form controls */
  --input-bg:            var(--color-bg);
  --input-radius:        var(--radius-sm);
  --input-padding:       var(--margin-sm) var(--margin-md);
  --input-border:        1px solid var(--kok-border);       /* empty */
  --input-border-filled: 1px solid var(--kok-border-200);   /* has value */
  --input-border-focus:  2px solid var(--kok-pink);    /* focus */
  --input-border-error:  1px solid var(--kok-error);
  --input-border-valid:  1px solid var(--kok-success);  /* pole poprawnie wypelnione */

  /* Focus ring (WCAG) — links, buttons, controls */
  --focus-ring: 2px solid var(--kok-pink);

  /* Disabled (not in Figma — system default) */
  --disabled-opacity: 0.45;
  --disabled-bg:      var(--kok-gray-100);
  --disabled-text:    var(--kok-gray-400);
  --disabled-border:  var(--kok-gray-200);

  /* Card (gradient border, no shadow) */
  --card-bg:      var(--color-bg);
  --card-radius:  var(--radius-md);
  --card-padding: var(--margin-sm);
  --card-gap:     var(--space-lg);

  --container-max: 1440px;
  --section-padding-y: var(--margin-5xl);
  --section-padding-x: var(--margin-7xl);
  --header-height: 80px;

  --Backgrounds-Bg-grey-25: #F5F6F6;

  /* Szerokosc tresci. Figma: 1440 - 2x120 = 1200px. Legacy 136.4rem daje przy
     drabince rem 1227,6px (>=1260px), czyli tresc szersza o 28px i przesunieta
     o 14px w lewo wzgledem makiety. min() przycina tylko na szerokich ekranach —
     na wezszych drabinka dziala jak dotad. */
  --inner-width: min(136.4rem, 1200px);
  --inner-margin-x: 1.5rem;
}

/* Dark theme = existing high-contrast mode (body.high-contrast). Primary action is yellow on dark. */
body.high-contrast {
  --color-bg:            #000000;      /* Bg-default */
  --color-surface:       #141618;      /* Bg-grey-50 */
  --color-surface-alt:   #1e1e1e;
  --color-border:        var(--kok-border-200);  /* Border-50 (dark) = #b4b6b7 */
  --color-text:          var(--kok-white);
  --color-text-body:     var(--kok-border);   /* Figma Subtext-600 (dark) = #d4d5d6 */
  --color-text-muted:    var(--kok-border);   /* dark: no muted grey */
  --color-text-subtle:   var(--kok-white);
  --color-text-invert:   var(--kok-black);
  --color-link:          var(--kok-yellow);


  --btn-primary-bg:      var(--kok-yellow);
  --btn-primary-text:    var(--kok-black);
  --btn-primary-bg-hover:#e6e600;

  --color-accent:        var(--kok-yellow);
  --color-accent-contrast: var(--kok-black);

  --input-border:        1px solid var(--kok-yellow);   /* Border-link-100 (dark) */
  --input-border-filled: 1px solid var(--kok-yellow);   /* same as empty in dark */
  --input-border-error:  1px solid var(--kok-yellow);


  --Backgrounds-Bg-grey-25: #141618;

  color-scheme: dark;
}

@media screen and (max-width: 719px) {
  :root {
    --fs-h1:    29px;  --lh-h1:      35px;   /* H1 — section headings */
    --space-xl: 30px;
  }
}