/*
  Lipowe Ogrody - design tokens.
  Three layers: primitives (--p-*), roles (--color-*, --space-*, ...) and scopes (.surface-navy, .surface-light).
  Components use only roles. Raw hex, px and ms values appear only in this file.
*/


:root{
  /* ---------- 1. Primitives: palette ---------- */
  --p-navy:#0A3354;          /* owner's colour */
  --p-navy-deep:#061F35;
  --p-navy-raised:#14426B;
  --p-white:#FFFFFF;
  --p-mist:#EAF0F5;
  --p-mist-2:#F7FAFC;        /* top of facade and window-frame gradients */
  --p-mist-3:#E4ECF3;        /* bottom of facade gradient */
  --p-line:#C5D1DC;          /* decorative dividers only (1.55:1 on white) */
  --p-ink-2:#4A5D70;
  --p-steel:#6B7C8D;         /* borders of controls (3.7:1 on mist, 4.3:1 on white) */
  --p-amber:#F2B544;
  --p-amber-deep:#E7A23A;    /* end of the day-axis gradient */
  --p-linden:#FBE3A6;
  --p-leaf:#6F9A4C;
  --p-leaf-dark:#3F6B2E;
  --p-sky:#9CC3E6;
  --p-sold:#7D8B99;
  --p-sold-stripe:#B9C6D3;
  /* text tints used on navy fields */
  --p-text-on-navy-1:#E4EEF7;
  --p-text-on-navy-2:#D6E4F1;
  --p-text-on-navy-3:#C9DAEA;
  --p-text-on-navy-4:#B7C7D6;

  /* ---------- 2. Roles: surfaces, text, lines (light sheet is the default scope) ---------- */
  --color-surface:var(--p-white);
  --color-surface-2:var(--p-mist);
  --color-surface-inverse:var(--p-navy);
  --color-surface-inverse-deep:var(--p-navy-deep);
  --color-surface-inverse-raised:var(--p-navy-raised);
  --color-highlight:var(--p-linden);          /* selected filter, tip box */

  --color-text:var(--p-navy);                 /* 13.0:1 on white */
  --color-text-muted:var(--p-ink-2);          /* 6.8:1 white, 5.9:1 mist, 5.4:1 linden */
  --color-text-link:var(--p-navy);
  --color-text-on-action:var(--p-navy-deep);  /* label on amber, 9.1:1 */

  --color-border:var(--p-line);               /* decorative dividers */
  --color-border-control:var(--p-steel);      /* fields, filter keys: >= 3:1 (WCAG 1.4.11) */
  --color-border-strong:var(--p-navy);        /* selected, line buttons, facade cells */

  --color-action:var(--p-amber);              /* primary action fill */
  --color-action-hover:var(--p-amber);        /* hover is motion (lift + longer cast shadow), not a colour change */
  --color-action-wash:var(--p-linden);        /* fill that sweeps in on line buttons */

  /* statuses: always colour + shape + word */
  --color-status-free:var(--p-leaf-dark);     /* 6.3:1 on white; square filled */
  --color-status-reserved:var(--p-navy);      /* square half filled */
  --color-status-sold:var(--p-ink-2);         /* square hatched; text stays ink-2, never --p-sold */
  --color-status-sold-stripe:var(--p-sold-stripe);
  --color-status-sold-row:rgba(125,139,153,.10);

  /* semantic (forms). Error and success are never conveyed by colour alone: icon + sentence. */
  --color-error:#A3261F;                      /* 7.4:1 on white */
  --color-error-surface:#FBE9E7;
  --color-success:var(--p-leaf-dark);
  --color-success-surface:#E7F0E0;
  --color-info:var(--p-navy);
  --color-info-surface:var(--p-mist);

  /* hero light */
  --color-sun:var(--p-amber);
  --color-sun-glow:rgba(242,181,68,.30);
  --color-sun-glow-mid:rgba(242,181,68,.10);
  --color-sun-glow-none:rgba(242,181,68,0);

  /* ---------- 3. Floor plan, site model, facade (one drawing language) ---------- */
  --plan-wall:var(--p-navy);                  /* solid fill, true thickness: 0.40 / 0.25 / 0.12 m */
  --plan-wall-outer:0.40;                     /* metres, for the renderer */
  --plan-wall-party:0.25;
  --plan-wall-partition:0.12;
  --plan-room-fill:var(--p-white);
  --plan-wet-fill:var(--p-mist);              /* bathroom, WC */
  --plan-tile-line:var(--p-line);             /* tile grid 0.30 m, 0.5 px */
  --plan-deck-fill:#E3E9EF;                   /* balcony / terrace boards, one stripe per 0.15 m */
  --plan-garden-fill:#D4E4C6;                 /* garden at 12 % green */
  --plan-window-frame:var(--p-navy);
  --plan-window-glass:var(--p-sky);           /* 1.5 px pane line; decorative, the gap in the wall carries the meaning */
  --plan-window-opening:var(--p-white);
  --plan-door-leaf:var(--p-navy);             /* 2 px line */
  --plan-door-swing:rgba(10,51,84,.40);       /* dashed 1 px arc */
  --plan-entrance-mark:var(--p-amber);
  --plan-dimension-line:rgba(10,51,84,.70);   /* 1 px, 45 degree ticks */
  --plan-dimension-label-bg:var(--p-white);   /* numbers always on solid white */
  --plan-north-fill:var(--p-navy);
  --plan-north-ring:var(--p-white);
  --plan-furniture-fill:var(--p-white);
  --plan-furniture-line:rgba(10,51,84,.60);   /* 1.25 px; wardrobes dashed */
  --plan-plant:var(--p-leaf);
  --plan-sunpatch:var(--p-linden);
  --plan-sunpatch-opacity:.72;
  --plan-label:var(--p-navy);                 /* room name Hanken 600, area Urbanist 800 */
  --plan-label-size-min:13px;                 /* printed size at scale 1; never below 11 px on phone */
  /* site model (axonometric) */
  --model-table:var(--p-navy-raised);
  --model-ground:#D5E2CB;
  --model-road:#B4C1CD;
  --model-lawn:#C6DAB6;
  --model-court:#EAD9B0;
  --model-water-glass:#7FA3BF;
  --model-ramp:#4E6A85;
  --model-ramp-inner:#2C4B69;
  --model-wall-shade:#9DB1C5;                 /* facade mixed toward --model-wall-lit by sun height */
  --model-wall-lit:#FFF6E3;
  --model-shadow:#06223D;                     /* cast shadows at .55 */
  --model-shadow-opacity:.55;
  --model-trunk:#5B4A3A;
  --model-crown:#4F7A38;
  --model-crown-lit:#86AE5E;
  --model-crown-spot:#C9DB8E;

  /* ---------- 4. Typography ---------- */
  --font-display:"Urbanist",system-ui,sans-serif;       /* 800: headings, flat numbers, prices, area figures */
  --font-text:"Hanken Grotesk",system-ui,sans-serif;    /* 400 / 500 / 600 / 700 */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;

  --text-h1:clamp(2.6rem,1rem + 3.9vw,7rem);            /* 41.6 px phone to 112 px */
  --text-h2:clamp(2rem,1rem + 2.6vw,4.25rem);
  --text-h3:clamp(1.25rem,1.1rem + .5vw,1.625rem);
  --text-flat-number:2.2rem;                            /* list row; 1.75rem on phone */
  --text-flat-number-sm:1.75rem;
  --text-price:1.375rem;
  --text-stat:clamp(1.1875rem,.8rem + .4vw,1.5rem);     /* room key, results count */
  --text-lead:clamp(1.0625rem,.9rem + .45vw,1.375rem);
  --text-body:1.0625rem;                                /* 17 px */
  --text-ui:.9375rem;                                   /* 15 px: buttons in nav, fields, tabs */
  --text-small:.875rem;                                 /* 14 px */
  --text-caption:.8125rem;                              /* 13 px: plan hint, small print */
  --text-micro:.75rem;                                  /* 12 px: floor numbers, cells; the lowest allowed on a page */
  --text-model-label-min:.6875rem;                      /* 11 px: building labels on the model, phone */

  --leading-display:.98;
  --leading-heading:1.02;
  --leading-tight:1.1;
  --leading-body:1.55;
  --tracking-display:-0.02em;
  --tracking-price:-0.01em;
  --measure-text:72ch;
  --measure-lead:44ch;

  /* ---------- 5. Spacing (4 px base) ---------- */
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;
  --space-15:160px;
  --section-pad:clamp(4rem,7vw,8rem);                   /* vertical padding of every band */
  --section-pad-last:clamp(5rem,8vw,9rem);
  --gutter-edge:1.5vw;                                  /* largest side margin of a band; bands are 100 % wide */
  --gutter-phone:16px;
  --gap-grid:clamp(1rem,1.6vw,2.2rem);
  --gap-grid-wide:clamp(1.2rem,2.5vw,3.5rem);

  /* ---------- 6. Widths (edge-to-edge bands, wide content container) ---------- */
  --band-width:100%;                                    /* no max-width on any band */
  --container:min(2300px,94vw);
  --container-phone:calc(100vw - 2 * var(--gutter-phone));
  --bp-phone:720px;
  --bp-tablet:1100px;
  --bp-desktop:1440px;
  --bp-wide:1600px;
  --bp-ultra:2000px;                                    /* finder gets a third column */

  /* ---------- 7. Shape ---------- */
  --radius-sheet:16px;      /* sheets, panels, filters, selected elevation */
  --radius-key:14px;        /* room keys, window frames */
  --radius-button:12px;     /* all buttons, toggles, view switches */
  --radius-choice:10px;     /* filter keys, nav links, fields, thumbs */
  --radius-segment:9px;     /* segment inside a switch (outer 12 - 3 padding) */
  --radius-cell:4px;        /* facade cells */
  --radius-pill:999px;      /* applied-filter chips only */
  --radius-drawing:0;       /* floor plans, tables, elevations, site plan */
  --border-hairline:1px;
  --border-control:2px;     /* line buttons, selected choice, focus */
  --border-accent:3px;      /* sum row double rule */
  --tap-min:24px;           /* WCAG 2.5.8 floor, any control */
  --tap-comfort:44px;       /* every main and nav button, icon buttons, compass keys */
  --height-button:48px;
  --height-button-small:44px;
  --height-control:42px;    /* fields, selects, toggles */
  --height-choice:40px;

  /* ---------- 8. Depth: cardboard model, two sizes ---------- */
  --light-x:-1;             /* sun is south-west: shadows fall to the right and down */
  --shadow-edge-top:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-edge-bottom:inset 0 -3px 0 rgba(10,51,84,.10);
  --shadow-sheet-near:0 2px 4px rgba(6,31,53,.08);
  --shadow-sheet-far:0 18px 40px -12px rgba(6,31,53,.22);
  --shadow-sheet:var(--shadow-edge-top),var(--shadow-edge-bottom),var(--shadow-sheet-near),var(--shadow-sheet-far);
  --shadow-sheet-lifted:var(--shadow-edge-top),var(--shadow-edge-bottom),0 4px 8px rgba(6,31,53,.10),0 26px 48px -12px rgba(6,31,53,.26);
  --shadow-plan-sheet:inset 0 -3px 0 rgba(10,51,84,.14),0 4px 8px rgba(0,0,0,.25),0 40px 70px -30px rgba(0,0,0,.75);
  --shadow-panel-on-navy:inset 0 1px 0 rgba(255,255,255,.14),0 24px 40px -24px rgba(0,0,0,.7);
  --shadow-key-on-navy:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(0,0,0,.6);
  --shadow-sundial:inset 0 1px 0 rgba(255,255,255,.16),0 22px 40px -18px rgba(0,0,0,.7);
  --shadow-segment:0 2px 6px rgba(6,31,53,.15);
  --shadow-window-inner:inset 14px 16px 22px -10px rgba(6,31,53,.55);  /* reveal shadow on the sun side */
  --cast-button:rgba(2,12,24,.55);                      /* parallelogram under the primary button, on navy */
  --cast-button-on-light:rgba(10,51,84,.35);
  --cast-button-blur:5px;
  --cast-row:rgba(6,31,53,.18);
  --cast-skew:-30deg;
  --cast-skew-hover:-42deg;
  --glow-size:1500px;

  /* ---------- 9. Opacity: one scale ---------- */
  --opacity-state-hover:.08;
  --opacity-state-pressed:.12;
  --opacity-disabled:.38;     /* filter key with 0 results: .32 in the facade */
  --opacity-dimmed:.32;       /* facade cell outside the current filter */
  --opacity-scrim:.55;
  --opacity-nav-border:.22;   /* 1 px outline of nav links on navy */
  --opacity-ghost-border:.45; /* 2 px outline of the secondary button on navy */
  --opacity-nav-wash:.22;     /* amber sweep in nav links */
  --opacity-hairline-on-navy:.22;

  /* ---------- 10. Motion (from the agency motion reference) ---------- */
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);       /* reveals, hovers */
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);      /* small details */
  --ease-in-out-expo:cubic-bezier(0.87,0,0.13,1);   /* plan / furnished switch */
  --ease-in-expo:cubic-bezier(0.7,0,0.84,0);        /* exits only */
  --duration-fast:150ms;
  --duration-normal:300ms;
  --duration-slow:600ms;
  --duration-slower:900ms;    /* hero entrance, sun travel from 13:00 to 15:30 */
  --duration-line:700ms;      /* headline line mask */
  --stagger-line:80ms;
  --stagger-row:70ms;         /* list rows, max 6 */
  --reveal-distance:40px;
  --hero-text-lift:16px;
  --key-lift:4px;
  --button-lift:3px;
  --button-lift-line:2px;
  --arrow-nudge:4px;
  --furniture-drop:6px;

  /* ---------- 11. Layers ---------- */
  --z-base:0;
  --z-under:-1;              /* fill and cast layers behind a button label */
  --z-under-2:-2;
  --z-raised:2;              /* hovered facade cell, row actions */
  --z-sundial:3;
  --z-header:20;
  --z-drawer:40;             /* mobile menu, filter drawer */
  --z-modal:60;
  --z-toast:80;

  /* ---------- 12. Focus (two-colour ring, see design-system.md) ---------- */
  --focus-width:3px;
  --focus-offset:2px;
  --focus-halo:5px;
  --focus-outer:var(--p-amber);       /* on navy fields */
  --focus-inner:var(--p-navy);
  --accent-color:var(--p-amber);      /* range input, checkbox, radio */
  --caret-color:var(--p-amber);
  --selection-bg:var(--p-amber);
  --selection-text:var(--p-navy-deep);

  color-scheme:light;
}

/* ---------- Scope: navy field (hero, plan demonstration, footer). Same role names, other values. ---------- */
.surface-navy{
  --color-surface:var(--p-navy);
  --color-surface-2:var(--p-navy-raised);
  --color-text:var(--p-white);                /* 13.0:1 */
  --color-text-muted:var(--p-text-on-navy-2); /* 10.1:1 on navy, 8.0:1 on raised */
  --color-text-link:var(--p-white);
  --color-text-helper:var(--p-sky);           /* 7.0:1 on navy, 5.6:1 on raised */
  --color-border:rgba(156,195,230,.22);
  --color-border-control:var(--p-text-on-navy-3);
  --color-border-strong:var(--p-white);
  --color-accent-text:var(--p-amber);         /* prices, sums, hour output: 7.1:1 navy, 5.7:1 raised */
  --focus-outer:var(--p-amber);
  --focus-inner:var(--p-navy);
}
.surface-navy-deep{
  --color-surface:var(--p-navy-deep);
  --color-text:var(--p-white);
  --color-text-muted:var(--p-text-on-navy-2); /* 12.9:1 */
  --color-border:rgba(156,195,230,.20);
  --color-accent-text:var(--p-amber);
}

/* ---------- Scope: light sheet (finder, day band). Focus ring flips: amber on white is only 1.8:1. ---------- */
.surface-light{
  --focus-outer:var(--p-navy);
  --focus-inner:var(--p-amber);
}

/* ---------- Base element states shared by every component ---------- */
::selection{background:var(--selection-bg);color:var(--selection-text)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus-width) solid var(--focus-outer);
  outline-offset:var(--focus-offset);
  box-shadow:0 0 0 var(--focus-halo) var(--focus-inner);
}
:where(input,textarea){caret-color:var(--caret-color)}
:where(input[type=range],input[type=checkbox],input[type=radio]){accent-color:var(--accent-color)}

@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:1ms;
    --duration-normal:1ms;
    --duration-slow:1ms;
    --duration-slower:1ms;
    --duration-line:1ms;
    --stagger-line:0ms;
    --stagger-row:0ms;
    --reveal-distance:0px;
    --hero-text-lift:0px;
    --key-lift:0px;
    --button-lift:0px;
    --button-lift-line:0px;
    --arrow-nudge:0px;
    --furniture-drop:0px;
  }
}