/* ============================================================================
   SELLIO.MA — DESIGN TOKENS
   The :root block below is copied faithfully from the :root custom-property
   block of docs/sellio-component.html (the authoritative design system:
   colour tokens, --r-* radii, --s-* spacing, --shadow-* elevation, --font).
   Everything after the copied block is an APP EXTENSION: additional semantic
   tokens the application layer needs (focus, disabled, skeleton, status,
   z-layering, touch targets, container widths) plus the [dir="rtl"] block.
   Values that already exist in the docs (e.g. --blue, --text-error) are NOT
   redefined — the semantic aliases below point at them.
   ============================================================================ */

:root{
  /* ---------- copied verbatim from docs/sellio-component.html ---------- */
  --red:#D90217;
  --red-1:#FF1304;
  --blue:#1677FF;
  --white:#FFFFFF;
  --white-2:#EAEAEA;
  --white-3:#F5F5F5;
  --white-4:#E0E0E0;
  --gray-1:#8C8C8D;
  --control-primary:#D90217;
  --control-secondary:#F5F5F5;
  --text-primary:#000000;
  --text-secondary:#8C8C8D;
  --text-tertiary:#E0E0E0;
  --text-invert-primary:#FFFFFF;
  --text-invert-secondary:#000000;
  --text-error:#FF1304;
  --bg-secondary:#F5F5F5;
  --elevated:#E9E9E9;

  /* radius vocabulary */
  --r-btn:20px;
  --r-card:28px;
  --r-input:20px;
  --r-sm:13px;
  --r-pill:999px;

  /* spacing scale */
  --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px;
  --s-24:24px; --s-28:28px; --s-32:32px; --s-40:40px;

  /* elevation */
  --shadow-subtle: rgba(0,0,0,0.06) 0px 2px 70px 10px;
  --shadow-med: rgba(0,0,0,0.10) 0px 4px 24px 4px;
  --shadow-high: rgba(0,0,0,0.16) 0px 12px 40px 8px;

  --font: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  /* ---------- app extensions (not in the docs block; values taken from
     literal usages inside docs/sellio-component.html where possible) ------ */

  /* blue accents reuse the docs --blue (#1677FF); these are the soft/deep
     literals the docs used inline for rent/verified/info surfaces */
  --blue-soft:#E8F1FF;          /* docs: badge-rent / badge-verified / alert-info bg */
  --blue-deep:#0B4FA8;          /* docs: alert-info text */

  /* focus ring (docs: .select:focus / .dd.open box-shadow rgba(217,2,23,.08)) */
  --focus-color:var(--red);
  --focus-ring:0 0 0 4px rgba(217,2,23,.08);
  --focus-outline:2px solid var(--red);

  /* disabled state (docs: .btn-disabled / .input-float:disabled) */
  --disabled-bg:var(--white-3);
  --disabled-text:var(--white-4);
  --disabled-border:var(--white-4);

  /* skeleton shimmer (docs: .skeleton gradient stops) */
  --skel-base:var(--white-3);
  --skel-shine:var(--white-2);

  /* status colours (docs: verified greens/ambers literals) */
  --ok:#1A9E5A;            /* docs: badge-sale / .hint.ok / .input.ok text */
  --ok-bg:#E7F6EC;         /* docs: badge-sale / alert-success bg */
  --ok-deep:#1A7A44;       /* docs: alert-success text */
  --warn:#A67C00;          /* docs: badge-status.paused text */
  --warn-bg:#FFF6DD;       /* docs: badge-status.paused / alert-warning bg */
  --warn-deep:#8A6A00;     /* docs: alert-warning text */
  --paused:var(--warn);
  --paused-bg:var(--warn-bg);
  --off:var(--gray-1);     /* docs: badge-status.off text */
  --off-bg:var(--white-3); /* docs: badge-status.off bg */
  --err:var(--text-error);
  --err-bg:#FFF3F2;        /* docs: .input.err / confirm-demo .ic bg */
  --err-deep:#B10E0E;      /* docs: alert-error text */
  --err-strong:#FFECEB;    /* docs: alert-error bg */
  --promoted:#E06A1E;      /* docs: badge-promoted text */
  --promoted-bg:#FFF1E8;   /* docs: badge-promoted bg */
  --vip-gold:#F5C542;      /* docs: badge-vip text */
  --vip-bg:#1A1A1A;        /* docs: badge-vip / toast / tooltip bg */
  --selected-bg:#FFF0F1;   /* docs: .side-nav a.active bg */
  --selected-red-bg:#FFF1F0;/* docs: .dd-opt.sel bg */

  /* z-index layering scale (docs: .dd-menu uses z-index:20) */
  --z-base:0;
  --z-raised:1;
  --z-dropdown:20;
  --z-sticky:50;
  --z-overlay:90;
  --z-drawer:100;
  --z-modal:110;
  --z-toast:120;
  --z-tooltip:130;

  /* minimum touch target (WCAG 2.5.5 / mobile-first) */
  --tap:44px;

  /* container widths for the 4 breakpoints — mobile / tablet / desktop /
     large desktop. Desktop cap follows the docs' .main max-width (1180px). */
  --container-mobile:100%;
  --container-tablet:680px;
  --container-desktop:1180px;
  --container-large:1280px;
}

/* ============================================================================
   RTL — direction-dependent tokens.
   Layout itself is flipped by the logical properties used in components.css;
   this block carries values that a logical property cannot express. They are
   consumed with fallbacks (var(--icon-flip, none)) so the sheets work even
   when rtl.css / this block never apply (LTR pages).
   ============================================================================ */
[dir="rtl"]{
  /* horizontal mirror for directional glyphs (chevrons, separators, arrows);
     consumed as transform:var(--icon-flip, none) in components.css */
  --icon-flip:scaleX(-1);
}