/* ============================================================
   Etlon UI Kit — design tokens
   Source: Figma "Etlon Design Ecosystem" (rabocha kopia)
            https://www.figma.com/design/38xmrsXBlI0ho9osma1Idd
   Page:   UIKIT  (Typography / Color / Icon / Button / Cells / Inputs)

   Base color/text/border/icon tokens already live in
   SelfService.App/wwwroot/css/akno-tokens.css (loaded before this file)
   and are not duplicated here. This file extends that set with
   weights, line-heights, radii, spacing and effects pulled from
   the Figma UIKIT styles directly.
   ============================================================ */
:root {
  /* -- Type family ------------------------------------------------------ */
  /* Project ships Muller; fall back chain matches kiosk WebView baseline. */
  --etlon-type-font-family: 'Muller', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* -- Type weights (per Figma Typography styles) ----------------------- */
  --etlon-type-heading1-weight: 500;          /* Heading 1: Muller Medium 64 */
  --etlon-type-heading2-medium-weight: 500;   /* Heading 2 / Medium 48     */
  --etlon-type-heading2-regular-weight: 400;  /* Heading 2 / Regular 48    */
  --etlon-type-title0-regular-weight: 400;    /* Title 0 / Regular 36      */
  --etlon-type-title0-light-weight: 300;      /* Title 0 / Light 36        */
  --etlon-type-title1-medium-weight: 500;     /* Title 1 / Medium 28       */
  --etlon-type-title1-regular-weight: 400;    /* Title 1 / Regular 28      */
  --etlon-type-title2-weight: 400;            /* Title 2 / Regular 26      */
  --etlon-type-subhead-weight: 500;           /* Subhead 1 / Medium 18     */
  --etlon-type-paragraph-regular-weight: 400; /* Paragraph / Regular 24    */
  --etlon-type-paragraph-light-weight: 300;   /* Paragraph / Light 24      */

  /* All Figma type styles use line-height 100%. */
  --etlon-type-line-height: 1;
  --etlon-type-letter-spacing: 0;

  /* -- Radii (sampled from Figma UIKIT Cells) --------------------------- */
  --etlon-radius-pill: 999px;
  --etlon-radius-card-cell: 28px;          /* Product card image-corner    */
  --etlon-radius-cart-line: 80px;          /* Cart product card 1032:2330  */
  --etlon-radius-cart-thumb: 60px;         /* Cart card thumb 1032:2330    */
  --etlon-radius-modifier-card: 40px;      /* Modifiers Card 1031:2423     */
  --etlon-radius-modifier-item: 40px;      /* Modifier item 1032:1273      */
  --etlon-radius-modifiers-panel: 80px;    /* Modifiers panel 1032:1811    */
  --etlon-radius-bottom-bar: 60px;         /* Action bar 1032:968 R60      */
  --etlon-radius-popover: 120px;           /* Description popover 1032:1878 */
  --etlon-radius-back-button: 60px;        /* Back button 1000:584 R60     */
  --etlon-radius-icon-button: 60px;        /* Generic icon button capsule  */

  /* -- Spacing ---------------------------------------------------------- */
  --etlon-spacing-screen-edge: 40px;       /* Horizontal screen padding    */
  --etlon-spacing-screen-vpad: 40px;       /* Vertical screen padding      */
  --etlon-spacing-section: 40px;
  --etlon-spacing-row-gap: 20px;
  --etlon-spacing-tight: 10px;

  /* -- Fills extending akno-tokens.css ---------------------------------- */
  /* "Fill / Modifiers card gradient" (Figma 483:1359). */
  --etlon-fill-modifiers-card-gradient: linear-gradient(
    180deg,
    rgba(66, 66, 66, 0.12) 0%,
    rgba(66, 66, 66, 0.6) 100%
  );
  /* "Fill / Out of stock overlay" (1030:644). */
  --etlon-fill-out-of-stock-overlay: rgba(232, 232, 232, 0.7);

  /* -- Effects ---------------------------------------------------------- */
  /* Inner highlight that makes the orange CTA capsule look "glossy"
     (see .menu-sidebar-cart__checkout / .product-detail-dock-add). */
  --etlon-shadow-cta-inset: inset 0 -10px 20px rgba(255, 255, 255, 0.5);
  --etlon-shadow-cta-inset-soft: inset 0 -10px 20px rgba(255, 255, 255, 0.45);
  /* Drop shadow under the floating bottom action bar / sticky CTA. */
  --etlon-shadow-bottom-bar: 0 -10px 30px rgba(0, 0, 0, 0.25);
  /* Hover/active boost on glass-on-photo cards. */
  --etlon-shadow-elevated-card: 0 4px 7px rgba(0, 0, 0, 0.45);
  /* Focus ring colour (re-used by all interactive atoms). */
  --etlon-ring-focus: 0 0 0 3px rgba(233, 99, 33, 0.45);

  /* -- Stage geometry (kiosk portrait 1080×1920) ------------------------ */
  --etlon-stage-width: 1080px;
  --etlon-stage-height: 1920px;
}