/*
  Charming Look: design tokens.
  The ONLY place for colours, type, spacing, radii, shadows and motion. app.css and every page use
  these variables and nothing else.
  Look (owner's decisions 2026-10-03): a professional SaaS app in the colours of charminglook.lt:
  white panels on a light grey canvas, the black wordmark, black primary buttons, the site's navy only
  as a small accent (focus, the "current" mark, tiny tags). No pink (owner, 2026-10-03).
  Owner of this file: the design agent (/root/charminglook-dizainas).
*/

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* Optical centring: Geist's own metrics centre CAPITALS in the line box, so mostly lower-case
     Lithuanian text sat ~1 px low next to icons and dots. These values centre the middle between
     x-height and cap height instead (same total height, so line heights do not change). */
  ascent-override: 96%;
  descent-override: 34%;
  line-gap-override: 0%;
}

/* Marcellus stays available for the client-facing pages only (it echoes the wordmark) */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Brand ------------------------------------------------------------------------------ */
  /* Accent = the navy of charminglook.lt's top banner (owner: no pink). Used sparingly: focus ring,
     the current section mark, the "now" line, small tags. */
  --brand: #1F2257;              /* 14.9:1 on white */
  --brand-strong: #1F2257;
  --brand-stronger: #1F2257;
  --brand-tint: #EDEEF6;         /* background of small tags */
  --brand-ink: #181717;          /* the logo black (charminglook.lt text colour) */
  --brand-navy: #1F2257;

  /* ---- Actions ---------------------------------------------------------------------------- */
  --action: #181717;             /* primary button: black, like the site's buttons */
  --action-hover: #3D3B3B;
  --text-on-action: #FFFFFF;     /* 17.9:1 */
  --selected: #EDEDEC;           /* current nav item, selected segment, current page */
  --hover: #F4F4F3;              /* row and item hover */

  /* ---- Surfaces --------------------------------------------------------------------------- */
  --canvas: #F6F6F5;             /* the app background behind the panels */
  --surface: #FFFFFF;            /* panels, tables, forms */
  --surface-app: #F6F6F5;        /* quiet areas inside panels: past visits, table head */
  --surface-sunken: #EFEFEE;     /* quotes, the SMS bubble */
  --surface-raised: #FFFFFF;     /* menus, popovers (with --shadow-pop) */
  --sidebar: #FBFBFA;

  /* ---- Text ------------------------------------------------------------------------------- */
  --text: #181717;               /* 17.9:1 on white */
  --text-muted: #6B6B6B;         /* 5.3:1 on white, 4.9:1 on --canvas */
  --text-subtle: #8A8A89;        /* only for large or non-essential text (3.5:1) */
  --text-link: #181717;          /* links are black and underlined, like the site */
  --text-on-brand: #FFFFFF;

  /* ---- Lines ------------------------------------------------------------------------------ */
  --line: #E7E7E6;               /* hairlines between rows, panel borders */
  --line-strong: #8A8A89;        /* form field borders, 3.5:1 on white */
  --focus: var(--brand);         /* navy ring, 14.9:1 on white */

  /* ---- Status (always shown with a word, never colour alone) ------------------------------ */
  --status-yes: #1F7A55;         /* TAIP, atvyks, pristatyta, veikia */
  --status-yes-tint: #E7F4EE;
  --status-no: #B3263E;          /* NE, atšaukė, nepavyko, klaida */
  --status-no-tint: #FBEAEC;
  --status-wait: #9A6A0B;        /* laukiama atsakymo, eilėje */
  --status-wait-tint: #FCF3DF;
  --status-wait-ink: #6E4C08;    /* text on --status-wait-tint */
  --status-none: #8A8A89;        /* no SMS yet, not applicable */
  --status-none-tint: #F0F0EF;

  /* Sending mode band: BANDOMASIS is loud on purpose, VEIKIA is quiet */
  --mode-test-bg: var(--status-wait-tint);
  --mode-test-ink: var(--status-wait-ink);
  --mode-test-edge: #E9C77A;

  /* ---- Data (charts: one hue for magnitude; see dataviz) ----------------------------------- */
  --data-1: #181717;             /* bars in single-series charts: the brand black */
  --data-track: #EDEDEC;         /* the unfilled track behind a bar */
  --data-grid: #EDEDEC;

  /* ---- Type ------------------------------------------------------------------------------- */
  --font-ui: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Marcellus", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;              /* 12 px: table head, meta */
  --fs-sm: 0.8125rem;            /* 13 px: secondary text, nav counts */
  --fs-md: 0.875rem;             /* 14 px: UI body, tables */
  --fs-lg: 1rem;                 /* 16 px: times in the call list, panel titles */
  --fs-xl: 1.125rem;             /* 18 px */
  --fs-2xl: 1.5rem;              /* 24 px: page title */
  --fs-stat: 1.75rem;            /* 28 px: figures in the stats strip */
  --fs-client-body: 1.0625rem;   /* 17 px: client pages */
  --fs-client-title: 1.625rem;   /* 26 px: client pages */

  --lh-tight: 1.2;
  --lh-ui: 1.45;
  --lh-text: 1.55;

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

  --tracking-tight: -0.015em;    /* page titles and stat figures */
  --tracking-wordmark: 0.09em;   /* only for a typeset CHARMING LOOK wordmark */

  /* ---- Space (4 px grid) ------------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Shape ------------------------------------------------------------------------------ */
  --radius-sm: 6px;              /* buttons, inputs, nav items */
  --radius-md: 10px;             /* panels, popovers, the login card */
  --radius-round: 999px;         /* status dots, badges */
  --border-thin: 1px;
  --focus-ring: 2px;

  /* ---- Elevation -------------------------------------------------------------------------- */
  --shadow-panel: 0 1px 2px rgb(24 23 23 / 0.04);
  --shadow-pop: 0 12px 32px rgb(24 23 23 / 0.14), 0 2px 6px rgb(24 23 23 / 0.06);

  /* ---- Layout ----------------------------------------------------------------------------- */
  --sidebar-width: 15.5rem;      /* 248 px */
  --topbar-height: 3.5rem;
  --page-max: 100rem;            /* 1600 px of content next to the sidebar */
  --side-col: 24rem;
  --control: 2.25rem;            /* 36 px: buttons and inputs on desktop */
  --tap: 2.75rem;                /* 44 px minimum tap target on phones */
  --gutter: clamp(1rem, 2.2vw, 2rem);

  /* ---- Motion: only in answer to an action ------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}