/* ============================================================================
   Rumb — szkoła językowa (Gdańsk · Gdynia · Sopot · online) — design tokens
   Concept "Namiar na morzu" (art-direction.md, 2026-09-28). Deep-sea dark
   surface, chart hairlines, one phosphor signal accent, grotesk + monospace.
   Token NAMES are unchanged from the previous (light, teal/raspberry) system
   so components.css/patterns.css and the three plugins keep working — only
   the VALUES and a few structural additions (mono family, hairline colour,
   signal) change. Dark by default; one light section overrides itself, see
   `.band-2` in components.css.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- 1. Primitive scales -------------------------------------------- */
  /* "brand" — the deep-sea scale (panels, hover tints, dividers) */
  --brand-50:  rgba(127, 227, 255, .06);  /* faint hover wash on a dark surface */
  --brand-100: rgba(127, 227, 255, .14);  /* active/selected pill, badge fill */
  --brand-200: #1C4A63;                   /* hairline divider */
  --brand-300: #3F5E70;                   /* secondary line, decorative ink */
  --brand-400: #3F5E70;                   /* border on a strong/dark band */
  --brand-500: #8FB0C2;                   /* brighter hairline (hover) */
  --brand-600: #1C4A63;
  --brand-700: #123044;
  --brand-800: #0B2236;                   /* panel */
  --brand-900: #1C4A63;                   /* footer/section hairline */
  --brand-950: #020608;                   /* near-black, pressed state */
  /* "accent" kept only for reference — --color-primary below points at signal */
  --accent-50:  rgba(127, 227, 255, .06); --accent-100: rgba(127, 227, 255, .14);
  --accent-200: rgba(127, 227, 255, .25); --accent-300: #7FE3FF; --accent-400: #7FE3FF;
  --accent-500: #7FE3FF; --accent-600: #5FCBE8; --accent-700: #5FCBE8;
  --accent-800: #06131F; --accent-900: #7FE3FF; --accent-950: #06131F;
  /* "neutral" — hairline / mist scale used by tiles, chips, calendar, etc. */
  --neutral-50:  #EAF2F6; --neutral-100: rgba(127, 227, 255, .10); --neutral-200: #123044;
  --neutral-300: #1C4A63; --neutral-400: #1C4A63; --neutral-500: #8FB0C2;
  --neutral-600: #8FB0C2; --neutral-700: #8FB0C2; --neutral-800: #EAF2F6;
  --neutral-900: #EAF2F6; --neutral-950: #06131F;

  /* semantic (word + icon carries the meaning; colour is the third cue —
     art-direction.md §4: no red, calm amber for "few seats") */
  --success: #8FE3A8;  --success-text: #8FE3A8;  --on-success: #06131F;  --success-bg: #123044;
  --warning: #F5C978;  --warning-text: #F5C978;  --on-warning: #06131F;  --warning-bg: #123044;
  --error:   #FF9E96;  --error-text:   #FF9E96;  --on-error:   #06131F;  --error-bg:   #123044;
  --info:    #7FE3FF;  --info-text:    #7FE3FF;  --on-info:    #06131F;  --info-bg:    #123044;

  /* ---- 2. Colour roles ---------------------------------------------------- */
  --sea:      #06131F;  /* the deep field */
  --sea-2:    #0B2236;  /* panels, instrument face */
  --sea-3:    #123044;  /* hover / raised */
  --hair:     rgba(127, 227, 255, .16);  /* chart hairlines, decorative */
  --hair-strong: #1C4A63;                /* borders that must be seen but are not text */
  --foam:     #EAF2F6;  /* text on sea; the light section surface */
  --mist:     #8FB0C2;  /* secondary text on sea (8.2:1) */
  --signal:   #7FE3FF;  /* the one accent: needle, CTA, active, level codes */
  --ink:      #06131F;  /* text on foam (the light section) */
  --ink-2:    #3F5E70;  /* secondary text on foam (6.1:1) */

  --color-background:      var(--sea);
  --color-surface:         var(--sea-2);   /* cards, fields, table rows, panels */
  --color-surface-2:       var(--sea-3);   /* hover / raised */
  --color-band:            var(--sea);     /* plain strip on the page field */
  --color-band-strong:     var(--sea-2);   /* the panel-toned band (contact, footer) */
  --color-text:            var(--foam);
  --color-text-heading:    var(--foam);
  --color-text-muted:      var(--mist);
  --color-text-on-strong:  var(--foam);
  --color-text-muted-on-strong: var(--mist);
  --color-border:          var(--hair-strong);
  --color-border-strong:   var(--mist);
  --color-ink:             var(--signal);  /* eyebrows, icons, secondary buttons, selected borders */
  --color-ink-hover:       #A6ECFF;
  --color-link:            var(--foam);
  --color-link-hover:      var(--signal);
  --color-primary:         var(--signal);  /* primary ACTION fill */
  --color-primary-hover:   #A6ECFF;
  --color-primary-active:  #5FCBE8;
  --color-on-primary:      #06131F;
  --color-accent:          var(--color-primary);
  --color-on-accent:       var(--color-on-primary);
  --color-selected-bg:     rgba(127, 227, 255, .08);
  --color-selected-border: var(--signal);
  --color-focus-ring:      var(--signal);
  --color-focus-ring-on-strong: var(--signal);
  --color-scrim:           rgb(6 19 31 / 0.72);

  /* seat states (always word + icon; colour is the third cue) */
  --seat-open:    var(--signal);       /* „Wolne miejsca: 5 z 8” */
  --seat-few:     var(--warning-text); /* „Zostały 2 miejsca” — calm amber, never red */
  --seat-full:    var(--mist);         /* „Grupa pełna — lista oczekujących” */
  --seat-running: var(--signal);       /* „Trwa — można dołączyć” */
  --seat-closed:  var(--mist);         /* „Zapisy zamknięte” — muted but ≥ 4.5:1 */

  /* ---- 3. Typography ------------------------------------------------------ */
  --font-heading: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  /* fluid scale: 360 px → 17 px, ratio 1.2 · 1280 px → 18 px, ratio 1.25 (max/min ≤ 2.5) */
  --step--1: clamp(0.8854rem, 0.8797rem + 0.0254vw, 0.9rem);      /* 14.2 → 14.4 */
  --step-0:  clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);     /* 17 → 18 */
  --step-1:  clamp(1.275rem, 1.2236rem + 0.2283vw, 1.4062rem);    /* 20.4 → 22.5 */
  --step-2:  clamp(1.53rem, 1.4409rem + 0.3962vw, 1.7578rem);     /* 24.5 → 28.1 */
  --step-3:  clamp(1.836rem, 1.6946rem + 0.6283vw, 2.1973rem);    /* 29.4 → 35.2 */
  --step-4:  clamp(2.2032rem, 1.9906rem + 0.945vw, 2.7466rem);    /* 35.3 → 43.9 */
  --step-5:  clamp(2.6438rem, 2.3349rem + 1.3728vw, 3.4332rem);   /* 42.3 → 54.9 */
  --step-6:  clamp(3.1726rem, 2.7348rem + 1.946vw, 4.2915rem);    /* 50.8 → 68.7 (key numbers only) */
  --leading-display: 1;     /* H1, big numerals — grotesk, tight */
  --leading-heading: 1.2;   /* H2, H3 */
  --leading-body: 1.55;     /* 17 → 26 px, 18 → 28 px */
  --leading-small: 1.45;
  --weight-body: 400;
  --weight-ui: 600;         /* labels, buttons, table headers */
  --weight-display: 800;    /* the one heading weight */
  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.12em;
  --measure-prose: 66ch;

  /* ---- 4. Spacing (4 px base) -------------------------------------------- */
  --space-0: 0; --space-px: 1px; --space-half: 0.125rem;
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;
  /* fluid layout space, both ends on the scale */
  --space-section:      clamp(3rem, 1.8261rem + 5.2174vw, 6rem);   /* 48 → 96 */
  --space-section-hero: clamp(4rem, 2.8261rem + 5.2174vw, 7rem);   /* 64 → 112 */
  --space-gutter:       clamp(1rem, 0.6087rem + 1.7391vw, 2rem);   /* 16 → 32 */
  --space-margin:       clamp(1rem, 0.6087rem + 1.7391vw, 2rem);   /* 16 → 32 page side margin */
  --container:       75rem;   /* 1200 px, 12 columns */
  --container-wide:  90rem;
  --container-form:  48rem;
  --container-prose: var(--measure-prose);
  --grid-size: 96px;   /* chart-grid hairline spacing, art-direction.md §5 */

  /* ---- 5. Shape, borders, depth, opacity --------------------------------- */
  --radius-sm: 0px;      /* sharp shapes everywhere (art-direction.md §5) */
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 9999px; /* filter chips, avatars, pills stay round (control shape, not a "card") */
  --border-1: 1px;  --border-2: 2px;  --border-4: 4px;
  --shadow-color: 200deg 70% 4%;
  --shadow-1: none;  --shadow-2: none;  --shadow-3: none;  --shadow-4: none;  /* hairlines, never shadows */
  --opacity-hover: 0.08;  --opacity-pressed: 0.12;  --opacity-drag: 0.16;
  --opacity-disabled-fg: 0.38;  --opacity-disabled-bg: 0.12;

  /* ---- 6. Sizes ---------------------------------------------------------- */
  --control-sm: 2rem;  --control-md: 2.5rem;  --control-lg: 3rem;  --control-xl: 3.5rem;  /* 32/40/48/56 */
  --touch-min: 2.75rem;  /* 44 */
  --icon-sm: 1rem;  --icon-md: 1.25rem;  --icon-lg: 1.5rem;

  /* ---- 7. Motion --------------------------------------------------------- */
  --dur-1: 100ms;  --dur-2: 150ms;  --dur-3: 200ms;  --dur-4: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);

  /* ---- 8. Layers --------------------------------------------------------- */
  --z-header: 10;  --z-sticky: 20;  --z-dropdown: 30;  --z-modal: 50;  --z-toast: 60;

  /* ---- 9. Imagery -------------------------------------------------------- */
  --img-grade: none;   /* duotone is applied with the `#rumb-duotone` SVG filter, not a CSS filter() chain */
  --img-portrait-ratio: 4 / 5;  --img-row-ratio: 4 / 3;  --img-header-ratio: 3 / 2;
  --img-portrait-position: 50% 30%;  /* eye line at ~30 % */
}

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

@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--foam);
    --color-border: var(--mist);
    --color-border-strong: var(--foam);
  }
}