/* ==========================================================================
   Initace — design tokens (direction A "Technical drawing", wide version)
   Source: design/design-system.md. One variable, --brand, drives all the colour.
   Layers: 1) raw values (static, also for old browsers),
           2) values derived from --brand (relative colour syntax, inside @supports),
           3) roles (surface, text, action, line, state).
   ========================================================================== */

/* ---------- Fallback faces sized to match Barlow and JetBrains Mono ----------
   Until the real face loads (font-display: swap), text is set in a local Arial or Courier New
   scaled to the same character widths and the same line height, so nothing shifts on the swap.
   Measured values: size-adjust = average width of a sample of Polish text (Barlow / Arial),
   overrides = metrics of the real face / size-adjust. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Liberation Sans"); font-weight: 400; font-style: normal; size-adjust: 95.9%; ascent-override: 104.3%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Liberation Sans"); font-weight: 500; font-style: normal; size-adjust: 96.5%; ascent-override: 103.6%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 600; font-style: normal; size-adjust: 91.1%; ascent-override: 109.8%; descent-override: 22.0%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 700; font-style: normal; size-adjust: 92.0%; ascent-override: 108.7%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial Italic"), local("Liberation Sans Italic"); font-weight: 400; font-style: italic; size-adjust: 93.3%; ascent-override: 107.2%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("Liberation Mono"); font-weight: 100 900; font-style: normal; size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* ---------- 1. Two input variables ---------- */
  --brand:  #13687f;   /* brand and action colour — the only value to change; oklch(0.481 0.083 221.5) */
  --accent: #c2410c;   /* the drawing's "red line": dimensions, callouts, stamps; independent of --brand */

  /* ---------- 2. Brand derivatives — static values (approved concept) ----------
     A browser without relative colour syntax keeps these numbers.
     A browser that supports it overrides them in the @supports block below. */
  --brand-hover:  #0f4a5e;  /* L −0.10 */
  --brand-active: #0c3f50;  /* L −0.14 */
  --brand-text:   #13687f;  /* brand as text: L ≤ 0.52 (≥ 4.5:1 on white and on the wash) */
  --brand-bright: #0e98ba;  /* light ink: hatching, logo, lines on dark; graphics only (≥ 3:1) */
  --brand-wash:   #eaf4f7;  /* wash: secondary button hover, selected day, "Uwaga" note frame */
  --brand-wash-2: #d9e9ef;  /* stronger wash: pressed state on the wash, selected row */
  --on-brand:     #ffffff;  /* text on a brand fill (white in the band L ≤ 0.55) */
  --ink:          #0a3242;  /* main text and main lines: L 0.30 in the brand hue */
  --ink-2:        #3d5560;  /* descriptive text: L 0.44 */
  --grid-minor:   #eceeef;  /* graph paper: 48 px cell */
  --grid-major:   #dfe3e5;  /* graph paper: 240 px cell */

  /* ---------- 3. Neutrals — always neutral, independent of the brand ---------- */
  --paper:    #ffffff;
  --paper-2:  #f5f6f6;  /* offer band, every second table row, disabled field background */
  --grey:     #5b6770;  /* mono labels, dates, kickers: 5.80:1 on white */
  --line:     #d8dde0;  /* secondary lines: rows, borders of quiet cards (decoration) */
  --line-strong: var(--ink); /* main lines: header, drawing frames, form fields */
  --screen:   #0b1220;  /* background behind the screenshot in the drawing frame */
  --field-border: #5b6770; /* field border: 5.80:1 (3:1 required) */

  /* ---------- 4. Meanings — fixed, they do not follow the brand ---------- */
  --error:       #aa0039;  /* 7.59:1 on white; ΔEOK 0.114 from --accent */
  --error-bg:    #ffefed;
  --success:     #007840;  /* 5.58:1 */
  --success-bg:  #e5faeb;
  --warning:     #8e5400;  /* 6.14:1 — amber as dark text, never yellow on white */
  --warning-bg:  #fff2d6;
  --info:        var(--brand-text);  /* information = brand: "Uwaga" note frame */
  --info-bg:     var(--brand-wash);
  --plat-woo:    #7f54b3;  /* only the 8 px dot beside the platform name */
  --plat-ps:     #df0067;

  /* ---------- 5. Roles ---------- */
  --color-background:   var(--paper);
  --color-surface:      var(--paper);
  --color-surface-2:    var(--paper-2);
  --color-text:         var(--ink);
  --color-text-muted:   var(--ink-2);
  --color-text-label:   var(--grey);
  --color-primary:      var(--brand);
  --color-primary-hover:  var(--brand-hover);
  --color-primary-active: var(--brand-active);
  --color-on-primary:   var(--on-brand);
  --color-link:         var(--brand-text);
  --color-link-hover:   var(--brand-hover);
  --color-link-visited: var(--ink-2);
  --color-border:       var(--line);
  --color-border-strong: var(--line-strong);
  --color-focus-ring:   var(--brand-text);
  --color-mark:         var(--accent);   /* all drawing marks */
  --color-selected-bg:  var(--brand-wash);
  --color-selected-border: var(--brand);

  /* ---------- 6. Typefaces and type scale ----------
     Barlow (400/500/600/700 + 400 italic), JetBrains Mono (400/500/600), woff2 files latin + latin-ext.
     clamp(): 375 px → 1440 px; step ratio ≈ 1.25 on desktop. */
  --font-sans: "Barlow", "Barlow Fallback", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Consolas", "Liberation Mono", monospace;
  --font-body:    var(--font-sans);
  --font-heading: var(--font-sans);

  --step--2: clamp(0.75rem, 0.71rem + 0.16vw, 0.8125rem);   /* 12 → 13 px: mono labels */
  --step--1: clamp(0.9375rem, 0.915rem + 0.1vw, 1rem);      /* 15 → 16 px: small text, captions */
  --step-0:  clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);   /* 17 → 18 px: body text */
  --step-1:  clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem);    /* 17 → 20 px: lead paragraph */
  --step-2:  clamp(1.375rem, 1.33rem + 0.2vw, 1.5rem);      /* 22 → 24 px: H4, card title */
  --step-3:  clamp(1.5625rem, 1.45rem + 0.5vw, 1.875rem);   /* 25 → 30 px: H3, spec-list item */
  --step-4:  clamp(2rem, 1.72rem + 1.2vw, 2.75rem);         /* 32 → 44 px: H2 */
  --step-5:  clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);       /* 34 → 56 px: H1 (ratio 1.65 ≤ 2.5) */
  --step-price: clamp(1.625rem, 1.5rem + 0.6vw, 2rem);      /* 26 → 32 px: price */

  --lh-tight:   1.05;  /* H1 */
  --lh-heading: 1.1;   /* H2 */
  --lh-sub:     1.2;   /* H3, H4 */
  --lh-body:    1.5;   /* text, lead paragraph */
  --lh-small:   1.45;  /* small text */
  --lh-label:   1.5;   /* mono labels */

  --tracking-heading: -0.012em;
  --tracking-label:    0.06em;   /* mono capitals 12–13 px */
  --tracking-stamp:    0.12em;   /* stamp, tag in a frame */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;   /* headings, buttons, prices */
  --weight-bold:    700;    /* logo only */

  /* ---------- 7. Spacing (4 px scale, in rem) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-14: 3.5rem;   /* 56 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  --section-y: clamp(3rem, 1.5rem + 3vw, 4.5rem);        /* 48 → 72 px: top and bottom of a section */
  --section-y-hero: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); /* 28 → 36 px: opening section (the drawing right under the header) */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);            /* 16 → 32 px: side margin */
  --gap-grid: clamp(1.5rem, 1rem + 1.5vw, 2rem);         /* 24 → 32 px: grid gutter */
  --gap-grid-y: clamp(2.25rem, 1.8rem + 1.5vw, 2.75rem); /* 36 → 44 px: vertical gutter of the views grid */

  /* ---------- 8. Widths ---------- */
  /* One page width (decision 2026-09-29): every section of every page is 1600 px like the header.
     Only running text is narrower (--measure), aligned to the left edge of that column. */
  --w-wide:    100rem;  /* 1600 px: page width — header, sections, footer */
  --w-content: var(--w-wide); /* the former 1280 px column; kept as a name, the value = page width */
  --w-prose:   45rem;   /* 720 px ≈ 66 characters at 18 px: article, description */
  --w-form:    40rem;   /* 640 px: enquiry form */
  --measure:   66ch;

  /* ---------- 9. Shape and lines ---------- */
  /* Corners follow the mark (a rounded triangle, decision 2026-09-29, ksiega-marki.html §5).
     One family: small → controls → surfaces; an element inside a frame never has a larger radius than the frame. */
  --radius-sm:   4px;    /* tags, labels, stamp, checkbox */
  --radius:      6px;    /* buttons, form fields, calendar days, dropdown */
  --radius-lg:   12px;   /* cards, view and screenshot frames, notice frames, dialogs, panels */
  --radius-full: 999px;  /* callout balloons and platform dots */
  --bw-1:    1px;    /* lines, card borders, fields */
  --bw-mark: 1.5px;  /* outline of buttons and drawing marks (balloons, stamp) — convention of the concept */
  --bw-2:    2px;    /* focus, field in focus and in error, recommended package, current menu item */
  --bw-4:    4px;    /* side bar of notice frames */
  --corner-mark: 14px; /* corner mark of a view frame */
  --balloon: 30px;     /* callout balloon */

  /* ---------- 10. Depth ---------- */
  --shadow-hard:  4px 4px 0 0 var(--line);                      /* "drawing" shadow of a hovered button */
  --shadow-float: 0 8px 24px 0 rgb(10 50 66 / 0.16);            /* layers: dropdown, dialog, cookie bar */
  --shadow-halo:  0 0 0 6px var(--paper);                       /* paper outline around the phone view */

  /* ---------- 11. Opacity ---------- */
  --o-hover:    0.08;
  --o-pressed:  0.12;
  --o-disabled: 0.38;
  --o-disabled-bg: 0.12;
  --o-scrim:    0.5;

  /* ---------- 12. Motion ---------- */
  --dur-1: 100ms;   /* hover, colour, underline */
  --dur-2: 200ms;   /* accordion, menu, notice, cross-fade */
  --dur-3: 300ms;   /* header hidden on the phone, menu layer, dialog */
  --dur-draw: 1200ms; /* drawing the dimension lines (signature) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: ease-out;

  /* ---------- 13. Sizes of controls ---------- */
  --h-control:     3.25rem; /* 52 px: primary button, field on desktop */
  --h-control-sm:  2.75rem; /* 44 px: small button in the header, hour in the calendar */
  --h-control-phone: 3rem;  /* 48 px: buttons on the phone */
  --h-header:      4.5rem;  /* 72 px desktop */
  --h-header-phone: 3.5rem; /* 56 px phone */
  --touch-min:     2.75rem; /* 44 px */

  /* ---------- 14. Layers ---------- */
  --z-sticky: 10;
  --z-header: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-toast: 50;
}

/* ==========================================================================
   Derived from --brand: browsers with relative colour syntax
   (full support: Chrome 131+, Safari 18+, Firefox 133+ per caniuse; partial earlier). Each value is lightness L
   set to a constant or shifted, chroma scaled, hue taken from the brand.
   ========================================================================== */
@supports (color: oklch(from red calc(l - 0.1) c h)) {
  :root {
    /* regime switch: 0 when L ≤ 0.55 (white text on the brand), 1 when L ≥ 0.56 (dark text) */
    /* fill states: same hue; in the white-text regime darker by 0.10 / 0.14,
       in the dark-text regime lighter by 0.06 / 0.08 (so dark text keeps its contrast) */
    --brand-hover:  oklch(from var(--brand) calc(l - 0.10 + 0.16 * clamp(0, (l - 0.55) * 100, 1)) calc(c * 0.8) h);
    --brand-active: oklch(from var(--brand) calc(l - 0.14 + 0.22 * clamp(0, (l - 0.55) * 100, 1)) calc(c * 0.7) h);

    /* brand as text and outline: lightness capped at 0.52 → ≥ 4.5:1 on white and on the wash for any hue */
    --brand-text:   oklch(from var(--brand) min(l, 0.52) c h);

    /* light ink for graphics (hatching, logo): constant lightness 0.62 → ≥ 3:1 on white */
    --brand-bright: oklch(from var(--brand) 0.62 min(calc(c * 1.4), 0.15) h);

    /* washes: almost white in the brand hue */
    --brand-wash:   oklch(from var(--brand) 0.965 calc(c * 0.15) h);
    --brand-wash-2: oklch(from var(--brand) 0.93 calc(c * 0.25) h);

    /* text on a brand fill: white when L ≤ 0.55; almost black (L 0.12) when lighter */
    --on-brand: oklch(from var(--brand)
                  calc(1 - 0.88 * clamp(0, (l - 0.55) * 100, 1))
                  0
                  h);

    /* ink: constant lightness, brand hue, muted chroma → 13:1 on white whatever the brand */
    --ink:   oklch(from var(--brand) 0.30 calc(c * 0.62) h);
    --ink-2: oklch(from var(--brand) 0.44 calc(c * 0.35) h);

    /* graph paper: a barely tinted grid (c ≈ 0.005) */
    --grid-minor: oklch(from var(--brand) 0.945 calc(c * 0.06) h);
    --grid-major: oklch(from var(--brand) 0.905 calc(c * 0.08) h);

    /* layer shadow in the ink hue */
    --shadow-float: 0 8px 24px 0 oklch(from var(--ink) l c h / 0.16);
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-draw: 0ms;
  }
}