/* ═══════════════════════════════════════════════════════════════════════════
   VOICEO panel — DESIGN TOKENS.
   Base palette copied from voiceo-landing/v2-main.css (same product team),
   systematised into scales: elevation · focus · semantic colour · type ·
   spacing · radius.

   Ground #FAFAFA · cards #FFFFFF/#FCFCFE · ink #0A0A0B.
   Green --live #00D26A = live/success SURFACES only. It is 1.6:1 on white —
   NEVER use --live for text or for a meaning-carrying icon. Green text = --ok.
   Aurora --grad = at most ONE element per screen.

   Every token name that existed before still resolves. Renamed ones are
   aliased at the bottom of :root.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- fonts ---------------------------------------------------------------- */
@font-face{font-family:"Gilroy";src:url("fonts/gilroy-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Gilroy";src:url("fonts/gilroy-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Gilroy";src:url("fonts/gilroy-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Gilroy";src:url("fonts/gilroy-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Gilroy";src:url("fonts/gilroy-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"FiraGO";src:url("fonts/firago-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FiraGO";src:url("fonts/firago-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"FiraGO";src:url("fonts/firago-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"FiraGO";src:url("fonts/firago-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root {
  /* ── surfaces & ink ─────────────────────────────────────────────────────── */
  --ground: #FAFAFA;              /* page background */
  --card: #FFFFFF;                /* the container surface */
  --card-2: #FCFCFE;              /* recessed surface: rails, table hover, insets */
  --ink: #0A0A0B;                 /* primary text, primary fill */
  --ink-2: #1C1C1F;               /* primary fill hover */
  --muted: #5B5B63;               /* secondary text — 6.7:1 on white */
  --muted-2: #71717A;             /* fine print / meta — 4.83:1 white, 4.63:1 ground (AA) */
  --line: rgba(10, 10, 11, .08);  /* hairline: card borders, row dividers */
  --line-2: rgba(10, 10, 11, .14);/* stronger hairline: input borders, chips */

  /* ── ink tints — washes, tracks and hovers ───────────────────────────────
     FOUR steps, and only these four. Before this ramp existed every screen
     invented its own alpha (14 distinct values were in play) and two screens
     asking for "a faint wash" landed on .02 and .025.                      */
  --tint-1: rgba(10, 10, 11, .025); /* faintest wash: closed/off cells */
  --tint-2: rgba(10, 10, 11, .05);  /* hover, segmented-control track */
  --tint-3: rgba(10, 10, 11, .07);  /* meter track, rails, inset strips */
  --tint-4: rgba(10, 10, 11, .12);  /* scrollbar thumb, strong divider */

  /* ── brand green ────────────────────────────────────────────────────────── */
  --live: #00D26A;                /* SURFACE only (fills, dots, bars). NOT text. */
  --live-hover: #00BE60;
  --live-ink: #062A17;            /* text ON a --live fill */
  --live-soft: rgba(0, 210, 106, .09);
  --live-line: rgba(0, 210, 106, .25);

  /* aurora accents (landing parity) */
  --m1: #5DFFC3;
  --m2: #3EC5FF;
  --m3: #8A7CFF;
  --m4: #C6FFF0;
  --m5: #6FE3FF;
  /* DECORATIVE SURFACE ONLY. #00C267 is 2.36:1 on white and #1FA8E8 is 2.68:1,
     so --grad may never be a text fill (background-clip:text) and never the
     fill under text. Text on an aurora element uses --grad-ink instead. */
  --grad: linear-gradient(92deg, #00C267 0%, #1FA8E8 100%);
  /* the same aurora, darkened until its whole ramp clears 4.5:1 on white —
     this is the one that may carry glyphs */
  --grad-ink: linear-gradient(92deg, #046B3C 0%, #0B5C86 100%);

  /* ── semantic: success / danger / warning ───────────────────────────────── */
  /* success TEXT + success icons on white/card — 5.4:1 */
  --ok: #067A45;
  --ok-soft: var(--live-soft);
  --ok-line: var(--live-line);

  /* danger — destructive actions, validation errors, closed/blocked states */
  --danger: #C43D3D;              /* text + outline — 5.1:1 on white, 4.9:1 on ground */
  --danger-hover: #A83232;        /* darker fill on hover — white text 6.6:1 */
  --danger-soft: rgba(196, 61, 61, .09);
  --danger-line: rgba(196, 61, 61, .32);
  --danger-ink: #FFFFFF;          /* text ON a --danger fill */

  /* warning — over quota, expiring, needs attention (never for errors) */
  --warn: #A25E00;                /* warning TEXT — 5.1:1 on white, 4.9:1 on ground */
  --warn-bold: #C97A16;           /* warning FILL: bars, dots, tiles — 3.3:1 (non-text) */
  --warn-soft: rgba(201, 122, 22, .10);
  --warn-line: rgba(201, 122, 22, .32);
  --warn-ink: var(--ink);         /* text ON a --warn-bold fill — 5.9:1 */

  /* text ON any dark/ink/gradient fill — the partner of --live-ink /
     --danger-ink / --warn-ink, so no screen has to write #fff freehand */
  --on-ink: #FFFFFF;

  /* control chrome */
  --toggle-off: #8C8C94;          /* .toggle track when OFF — 3.3:1 on white */
  --toggle-on-line: var(--ok);    /* 1px edge on the ON track — 5.4:1 boundary */

  /* ── elevation — DELIBERATELY FLAT ──────────────────────────────────────── */
  /* The owner asked for a flat panel: resting surfaces carry NO shadow, only a
     hairline. --e0/--e1 are real, composable, invisible shadow values (not
     `none`) so they stay valid inside comma-separated shadow lists.
     Only things that float above the page get real elevation.               */
  --e0: 0 0 0 0 rgba(10, 10, 11, 0);                                        /* flat */
  --e1: 0 0 0 0 rgba(10, 10, 11, 0);                                        /* resting: .card, tiles, rows */
  --e2: 0 2px 8px rgba(10, 10, 11, .06);                                    /* raised affordance: selected segment, active nav */
  --e3: 0 10px 28px rgba(10, 10, 11, .10), 0 2px 6px rgba(10, 10, 11, .05); /* popover / dropdown / menu */
  --e4: 0 24px 60px rgba(10, 10, 11, .16), 0 4px 14px rgba(10, 10, 11, .07);/* modal */
  --e-toast: 0 12px 30px rgba(10, 10, 11, .22);                             /* toast on the ink pill */
  --sh-knob: 0 1px 4px rgba(10, 10, 11, .18);                               /* toggle knob only */

  /* ── focus ──────────────────────────────────────────────────────────────── */
  /* Two-ring: a surface-coloured gap then a near-black ring. Visible on white,
     on --card-2, on --ground, on a --live fill and on an --ink fill.        */
  --focus-ring: var(--ink);
  --focus: 0 0 0 2px var(--card), 0 0 0 4px var(--focus-ring);
  --focus-inset: inset 0 0 0 2px var(--focus-ring);  /* when an ancestor clips overflow */

  /* ── type scale ─────────────────────────────────────────────────────────── */
  /* 12px is the HARD FLOOR. Nothing smaller, ever. */
  --fs-micro: 12px;    /* table th, ticks, counts, timestamps */
  --fs-fine: 12.5px;   /* fine print, field labels, hints, pill text */
  --fs-btn: 13px;      /* button / chip / segment label — the densest control text */
  --fs-sm: 13.5px;     /* dense rows, menu items, secondary body */
  --fs-md: 14px;       /* default row / table cell / nav */
  --fs-base: 15px;     /* body base, emphasised row */
  --fs-lg: 16.5px;     /* card lead, small heading */
  --fs-2xl: 24px;
  --fs-3xl: 28px;      /* big number (usage) */
  --fs-4xl: 30px;      /* big number (plan price) */
  /* role aliases — prefer these in screen CSS */
  --fs-label: var(--fs-fine);   /* <label>, section labels */
  --fs-hint: var(--fs-fine);    /* helper text, fine print */
  --fs-row: var(--fs-md);       /* list/table row primary text */
  --fs-meta: var(--fs-micro);   /* counts, times, ticks, th */
  /* line heights */
  --lh-tight: 1.3;
  --lh-body: 1.55;

  /* ── spacing scale (4px base, with 2px half-steps under 16) ─────────────── */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  /* role aliases */
  --sp-inline: var(--sp-8);   /* icon ↔ its label */
  --sp-stack: var(--sp-12);   /* stacked fields inside a card */
  --sp-grid: var(--sp-16);    /* card ↔ card in a grid */
  --sp-card: clamp(18px, 2.2vw, 26px);   /* inner card padding (.card--pad) */
  --sp-sec: clamp(28px, 3.4vw, 40px);    /* major section ↔ section */

  /* ── radius ─────────────────────────────────────────────────────────────── */
  --r-xxs: 2px;    /* flags, tiny swatches */
  --r-xs: 4px;     /* bubble tail corner */
  --r-sm: 8px;     /* menu items, skeletons, inline tags */
  --r-md: 10px;    /* small buttons, icon buttons, nav links, inset rows */
  --r-lg: 12px;    /* cards, inputs, buttons (= --r-card / --r-btn) */
  --r-xl: 14px;    /* chat bubbles, larger tiles */
  --r-2xl: 16px;   /* modal (= --r-big) */
  --r-3xl: 20px;   /* mobile modal */
  --r-full: 999px; /* pills (= --r-pill) */
  --r-circle: 50%;
  /* back-compat names */
  --r-card: var(--r-lg);
  --r-big: var(--r-2xl);
  --r-btn: var(--r-lg);
  --r-pill: var(--r-full);

  /* ── layout & motion ────────────────────────────────────────────────────── */
  --font: "Gilroy", "FiraGO", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t: .22s cubic-bezier(.2, 0, 0, 1);
  --sidebar-w: 236px;
  --topbar-h: 66px;
  --content-max: 1180px;
  --content-pad: clamp(20px, 3vw, 40px);
  --row-h: 56px;
  --row-h-sm: 46px;
  --ctl-h: 44px;      /* input / select / textarea row height */
  --ctl-h-sm: 36px;   /* compact input inside a row */
  --btn-h: 42px;
  --btn-h-sm: 34px;
  --seg-h: 32px;      /* canonical segmented control */
  --seg-h-sm: 28px;
}

/* --- base ------------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{
  font:var(--fs-base)/var(--lh-body) var(--font); color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
::selection{background:rgba(0,210,106,.22)}

/* tabular numerals — put on EVERY number, price, time */
.num{font-variant-numeric:tabular-nums}

/* uppercase Georgian via the case feature (never text-transform alone on KA) */
.up{text-transform:uppercase;font-feature-settings:"case" 1;letter-spacing:.1em}

/* live dot — green means "live / success", never decoration */
.dot-live{
  width:7px;height:7px;border-radius:var(--r-circle);background:var(--live);flex:none;
  box-shadow:0 0 0 3px rgba(0,210,106,.16);
}

/* headings: tight tracking, KA slightly looser (per language law) */
h1,h2,h3{font-weight:700;letter-spacing:-.04em}
html[lang="ka"] h1,html[lang="ka"] h2,html[lang="ka"] h3{letter-spacing:-.02em}
h1{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.2}
h2{font-size:1.2rem;line-height:var(--lh-tight)}
h3{font-size:1rem;line-height:1.35}

/* --- input base: quiet 1px border, white fill ------------------------------ */
input[type="text"],input[type="tel"],input[type="email"],input[type="number"],
input[type="search"],input[type="time"],input[type="date"],input[type="password"],
select,textarea{
  font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-btn);
  height:var(--ctl-h);padding:0 14px;width:100%;
  transition:border-color var(--t),box-shadow var(--t);
}
textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:var(--lh-body)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--live);box-shadow:var(--focus);
}
/* every interactive thing keeps a visible keyboard ring — the ring follows the
   element's own border-radius, so pills stay pills. */
button:focus-visible,a:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:none;box-shadow:var(--focus);
}

/* --- shared button base (variants live in shell.css) ----------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  height:var(--btn-h);padding:0 18px;border-radius:var(--r-btn);
  font-size:var(--fs-md);font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
  transition:transform var(--t),background var(--t),border-color var(--t),
             box-shadow var(--t),color var(--t),opacity var(--t);
}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* --- visually hidden: read by screen readers, invisible on screen ---------- */
/* Use INSTEAD of display:none whenever the text is the accessible name.      */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  .btn:active{transform:none}
}

/* Forced colours (Windows High Contrast) throw box-shadow away but KEEP the
   author's outline:none — which left the panel with no focus indicator at all.
   Hand the ring back to the UA there. */
@media (forced-colors: active){
  input:focus,select:focus,textarea:focus,
  button:focus-visible,a:focus-visible,summary:focus-visible,
  [tabindex]:focus-visible,[role="button"]:focus-visible,
  .toggle input:focus-visible + i,:focus-visible{
    outline:3px solid Highlight;outline-offset:2px;
  }
}