/* ==========================================================================
   Stelar Reality — design tokens
   Custom properties only. No selectors other than :root, no rules.
   Canonical names are the ones published by the Stelar Reality Design System
   (`tokens/*.css`); the app-only additions are grouped at the bottom.

   BREAKPOINT CONTRACT — custom properties cannot be used inside media
   queries, so the breakpoint set is documented here and enforced by review.
   The ONLY breakpoints allowed anywhere in this stylesheet:

       30rem   480px   small phone -> large phone
       48rem   768px   phone -> tablet
       64rem  1024px   tablet -> desktop
       75rem  1200px   desktop -> wide

   Max-width forms use the 0.02rem-down convention (e.g. 63.98rem).
   No other breakpoint may be introduced in tokens/base/layout/components/
   utilities. If a component needs a different reflow point, use a container
   primitive from layout.css instead of a new global breakpoint.

   DELIBERATE DEVIATIONS FROM THE BRAND SPEC (each documented at its token):
     1. --control-h is 40px, not the 52px in uploads/DESIGN.md.
     2. --text-link is copper-hover, not raw copper.
     3. --radius-subtle / --radius-control are 2px, not 0.
     4. The type scale runs one step below the marketing site throughout.
     5. .switch reads --radius-full for a capsule track, which the token's own
        comment below scopes to dots/radios/spinners/avatars. Chosen knowingly
        over a clickable status chip for the admin products grid; see the note
        at .switch in components.css.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------- */
  --color-copper: #BD5C17;          /* fills, borders, icons, large type */
  --color-copper-hover: #A45014;    /* darkened for hover + copper TEXT */
  --color-copper-active: #904611;   /* pressed */

  --color-gold: #FBBA00;            /* brand gradient, light stop */
  --color-gold-mid: #F7A600;        /* brand gradient, mid stop */
  --color-line: #F3AD00;            /* graphic ray / motif line */
  --color-accent-light: #FDCA5D;    /* cross accent — never body text on white */
  --color-white: #FFFFFF;

  /* --- Neutral scale (warm grey) ------------------------------------- */
  --color-neutral-050: #F5F5F5;
  --color-neutral-200: #E0E0E0;
  --color-neutral-500: #7E7E7E;
  --color-neutral-700: #585857;
  --color-neutral-900: #292927;

  /* --- Gradients ------------------------------------------------------ */
  --gradient-brand: linear-gradient(to bottom left, #FBBA00 0%, #F7A600 50%, #BD5C17 100%);
  --gradient-ray: linear-gradient(90deg, rgba(189, 92, 23, 1) 0%, rgba(243, 173, 0, 0) 100%);

  /* --- Semantic text --------------------------------------------------- */
  --text-primary: #292927;
  --text-secondary: #585857;   /* muted BODY text — AA at every size */
  --text-muted: #7E7E7E;       /* >=18.66px bold / >=24px only */
  --text-on-copper: #FFFFFF;
  --text-inverse: #FFFFFF;

  /* DEVIATION 2: link text is copper-hover (#A45014, 5.6:1), never raw
     copper (#BD5C17, 3.6:1 — fails AA for body-size text). Raw copper stays
     for fills, borders, icons and >=24px type. */
  --text-link: var(--color-copper-hover);

  /* --- Semantic surfaces ---------------------------------------------- */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F5F5F5;
  --surface-inverse: #292927;
  /* Row hover. Deliberately half a step above --surface-secondary: on a dense
     table the 050 grey reads as a selected row rather than a hovered one. */
  --surface-hover: #FAFAFA;

  /* --- Borders --------------------------------------------------------- */
  --border-subtle: #E0E0E0;
  --border-strong: #BD5C17;
  --border-width: 1px;

  /* --- Typography ------------------------------------------------------ */
  /* No @font-face: the licensed Rework woff2 files have not been delivered.
     Verdana carries the secondary typographic system until they arrive; when
     they do, add @font-face here and nothing else changes. */
  --font-headline: "Rework Headline", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-text: "Rework Text", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Marketing display scale (fluid) — available for hero-style surfaces */
  --type-display-xl-size: clamp(48px, 7vw, 112px);
  --type-display-xl-lh: 0.95;
  --type-display-xl-ls: -0.035em;
  --type-display-lg-size: clamp(40px, 5.5vw, 80px);
  --type-display-lg-lh: 1;
  --type-display-lg-ls: -0.03em;

  /* Application heading scale — the e-shop runs tighter than the website.
     DEVIATION 4 lives here too: this is a dense internal tool, not a brochure,
     so the scale sits one step below the marketing site throughout. */
  --type-h1-size: 1.625rem;    /* 26px */
  --type-h2-size: 1.375rem;    /* 22px */
  --type-h3-size: 1.1875rem;   /* 19px */
  --type-h4-size: 1.0625rem;   /* 17px */
  --type-h5-size: 1rem;        /* 16px */
  --type-h6-size: 0.875rem;    /* 14px */
  --type-heading-lh: 1.2;
  --type-heading-ls: -0.02em;

  /* Body. --type-body-md-size is the app's base reading size and the thing to
     move first if the UI ever needs to breathe again. */
  --type-body-lg-size: 1.0625rem;  /* 17px */
  --type-body-md-size: 0.875rem;   /* 14px — body default */
  --type-body-sm-size: 0.8125rem;  /* 13px — table cells, dense rows */
  --type-body-xs-size: 0.75rem;    /* 12px — captions, hints */
  --type-body-lh: 1.5;

  /* UI chrome: nav links, menu items, buttons, flashes. One token because
     seven components were each carrying the same literal. */
  --type-ui-size: 0.875rem;    /* 14px */

  /* Label / eyebrow */
  --type-label-size: 0.75rem;
  --type-label-weight: 600;
  --type-label-ls: 0.08em;
  --type-label-transform: uppercase;

  /* --- Spacing (8px grid, 4px micro) ----------------------------------- */
  --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;
  --space-10: 128px;

  /* --- Widths ----------------------------------------------------------- */
  --content-max: 1440px;
  --text-max: 720px;
  --gutter: 20px;          /* stepped up at 48rem / 75rem in layout.css */
  --sidebar-w: 248px;

  /* Public topbar height. Everything that has to clear the sticky header reads
     this (.sticky-aside, the floating flash stack) instead of repeating the
     number, because the header carries the search field and grows a second row
     below 64rem — where components.css restates this token to match. */
  --topbar-h: 60px;

  /* --- Radius — sharp, architectural. Round is for dots and avatars only. ---
     These are the four names the design system itself publishes
     (stelar-brand/tokens/spacing.css:22-25) and its components consume
     (Card.jsx:17, Badge.jsx:26, PropertyCard.jsx:29 read --radius-subtle;
     Button.jsx:38, Input.jsx:41 read --radius-control), so the app stays
     token-compatible rather than inventing a parallel scale.

     DEVIATION 3: upstream ships all four at 0px and readme.md:87 says "all
     corners are square". But SKILL.md:14, in the never-break list, says
     "Sharp architectural geometry (0-4px radius)", and
     components/core/Card.prompt.md:1 specifies "Sharp corners (2px)" — which
     is exactly this value. uploads/DESIGN.md:580 forbids "vyrazne zaoblene"
     (markedly rounded) cards and pill buttons; 2px is neither.

     CEILING: 4px is the top of the sanctioned band. Never exceed it, never
     let --radius-control exceed --radius-subtle (small boxes read rounder
     than large ones at the same absolute radius), and never pill a button. */
  --radius-none: 0;
  --radius-control: 2px;   /* buttons, inputs, selects, chips, badges */
  --radius-subtle: 2px;    /* cards, dialogs, panels, media frames, wells */
  --radius-full: 9999px;   /* status dots, radios, spinners, avatars only */

  /* --- Elevation — depth from tone and hairlines, never heavy shadow ---- */
  --shadow-none: none;
  --shadow-sm: 0 6px 20px rgba(41, 41, 39, 0.06);
  --shadow-subtle: 0 12px 40px rgba(41, 41, 39, 0.08);
  --shadow-cinematic: 0 30px 100px rgba(41, 41, 39, 0.16);

  /* --- Motion — cinematic: fast in, long out --------------------------- */
  --motion-fast: 180ms;
  --motion-standard: 360ms;
  --motion-slow: 900ms;
  --motion-ambient: 12000ms;
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- App semantic palette (shared with the Stelar TV app) ------------ */
  --color-success: #2F6B4F;
  --color-warning: #8A5B00;
  --color-danger: #A03329;
  --color-info: #3A5F73;

  /* --- Tone triads: tinted surface / hairline / AA text ----------------- */
  --tone-success-bg: #EEF5F1;
  --tone-success-border: #CFE2D8;
  --tone-success-text: #1E4D38;

  --tone-warning-bg: #FBF4E6;
  --tone-warning-border: #EEDFBE;
  --tone-warning-text: #6B4600;

  --tone-danger-bg: #FBF0EF;
  --tone-danger-border: #EBCFCC;
  --tone-danger-text: #7A2620;

  --tone-info-bg: #EFF4F7;
  --tone-info-border: #D3E0E7;
  --tone-info-text: #2C4A5A;

  --tone-copper-bg: #FAF2EC;
  --tone-copper-border: #E9D3C0;
  --tone-copper-text: #7A3D0F;

  --tone-neutral-bg: #F5F5F5;
  --tone-neutral-border: #E0E0E0;
  --tone-neutral-text: #585857;

  /* --- Controls --------------------------------------------------------- */
  /* DEVIATION 1: 40px, not the 52px in uploads/DESIGN.md. The e-shop is a
     dense internal tool (tables, inline row actions, modal forms) used all day
     on laptops; 52px rows push admin tables well past a viewport, and the 48px
     this used to be still read as a brochure CTA rather than an admin control.

     40px does NOT clear the 44px touch minimum on its own — that is deliberate,
     and it makes the mobile bump in components.css section 24 load-bearing for
     the first time: below 64rem every interactive row is lifted back to 44px.
     Do not remove that block, and do not drop these below 24px, which is the
     WCAG 2.5.8 minimum target size. */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 44px;

  /* --- Focus — always a real outline, never a box-shadow ----------------
     Offset 0, deliberately: an offset ring is added to the element's corner
     radius, so it renders as a second, rounder box floating around the first
     rather than as one control's focus state. See base.css section 6. */
  --focus-ring: 2px solid var(--color-copper);
  --focus-offset: 0;

  /* --- Stacking order --------------------------------------------------- */
  --z-sticky: 100;
  --z-topbar: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
}