/* ArchiCAD.ge — the design tokens.
 *
 * The one place the site's colours, sizes, type and motion are decided. Every
 * page links this file first (the app, /login, the unlock screen, /terms and
 * /privacy, /admin) and names its own variables after these — `--muted:
 * var(--gl-muted)` — so a value changed here changes on every page at once.
 * The account, projects and variants layers live inside the app page and use
 * its variables, which are aliases of these too.
 *
 * Night is the default; html[data-theme="day"] (set from localStorage before
 * the first paint) switches to day. The values are the app's own, already
 * checked against WCAG AA: text ≥ 4.5:1, control edges and the focus ring
 * ≥ 3:1, on every surface of their theme. Served from public/ — outside the
 * /data gate — because the unlock and sign-in screens need it before any
 * ticket. Components built from these tokens are in gl-components.css. */

/* Inter and JetBrains Mono have no Georgian letters, so Georgian text fell
   back to whatever the operating system had and looked different on every
   machine. Noto Sans Georgian (OFL, /fonts) sits right after them in every
   stack; the unicode-range keeps Latin letters and figures in Inter and fetches
   the file only when a page actually shows Georgian. */
@font-face {
  font-family: 'Noto Sans Georgian';
  src: local('Noto Sans Georgian'), local('NotoSansGeorgian-Regular'),
       url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  src: local('Noto Sans Georgian Bold'), local('NotoSansGeorgian-Bold'),
       url('/fonts/NotoSansGeorgian-Bold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

:root {
  /* ---- surfaces: the page, then four steps of panel, darkest first ------ */
  --gl-bg: #090d14;
  --gl-surface-0: #0c1219;
  --gl-surface-1: #121a24;
  --gl-surface-2: #18212d;
  --gl-surface-3: #1f2a38;
  /* behind a dialog */
  --gl-overlay: rgba(3, 6, 12, 0.62);

  /* ---- text: on the darkest to the lightest surface ----------------------
     text 13.9–18.6:1, text-2 9.0–12.1:1, muted 5.7–7.6:1, subtle 5.1–6.9:1
     (subtle replaces the slate #64748b captions used, 3.0–4.1:1). The
     placeholder reads as the subtle text so a field's hint is legible. */
  --gl-text: #f8fafc;
  --gl-text-2: #c2cddb;
  --gl-muted: #94a3b8;
  --gl-subtle: #8b9bb4;
  --gl-placeholder: #8b9bb4;

  /* ---- lines: a divider, a stronger one, and the edge of a control
     (≥3:1 on every surface, so an empty field or an off switch is seen). */
  --gl-border: rgba(148, 163, 184, 0.12);
  --gl-border-strong: rgba(148, 163, 184, 0.24);
  --gl-control-line: #6b7a90;

  /* ---- tints: a neutral wash laid over a panel — a chip or a row at rest,
     its hover, and a pressed or strong one. Three steps, so a hover is
     always a step above its rest state. What a control says is carried by
     its text and edge, not by the tint. Over the page and the panels (bg,
     surface-0…2) text, text-2 and muted keep ≥4.5:1 on every step (muted
     4.5:1 on tint-3), the state inks on tint-1 and -2; subtle is for the
     bare panels only. */
  --gl-tint-1: rgba(255, 255, 255, 0.04);
  --gl-tint-2: rgba(255, 255, 255, 0.07);
  --gl-tint-3: rgba(255, 255, 255, 0.11);

  /* ---- accent: the fill of a primary button (white on it 5.2:1), its ink
     on the panels (≥8:1), a wash behind a selected thing, and its ring. */
  --gl-accent: #2563eb;
  --gl-accent-hover: #1d4ed8;
  --gl-accent-ink: #93c5fd;
  --gl-accent-soft: rgba(59, 130, 246, 0.15);
  --gl-accent-ring: rgba(59, 130, 246, 0.45);
  --gl-on-accent: #ffffff;
  /* The keyboard ring: ≥5.7:1 on every dark surface. */
  --gl-focus: #60a5fa;

  /* ---- state: the colour (an icon, a dot, a filled badge), its ink for text
     on the panels (≥4.5:1), and a wash behind a message. */
  --gl-success: #22c55e;
  --gl-success-ink: #4ade80;
  --gl-success-soft: rgba(34, 197, 94, 0.14);
  --gl-warning: #f59e0b;
  --gl-warning-ink: #fbbf24;
  --gl-warning-soft: rgba(245, 158, 11, 0.14);
  --gl-danger: #ef4444;
  --gl-danger-ink: #f87171;
  --gl-danger-soft: rgba(239, 68, 68, 0.14);
  --gl-disabled-opacity: 0.55;
  /* The tool panel's group colours (r, g, b — used as rgb(var(--tone)) and
     rgba(var(--tone), a)): the groups split out of „დოკუმენტები“ (index.html). */
  --gl-tone-permit: 251, 113, 133;
  --gl-tone-sheets: 167, 139, 250;
  --gl-tone-files: 74, 222, 128;

  /* ---- the brand: the logo's tile, and the "CAD" of the word mark -------- */
  --gl-brand-grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 52%, #6366f1 100%);
  --gl-brand-ink: #38bdf8;
  /* The brand tile drawn in the page (index.html's home link): the same
     colours as public/brand/logo.svg in both themes, and its hover's map
     edge, its thickness, the sheen, the shadow and the pin on Tbilisi. */
  --gl-brand-tile-1: #0284c7;
  --gl-brand-tile-2: #2563eb;
  --gl-brand-map: #ffffff;
  --gl-brand-map-side: #93c5fd;
  --gl-brand-map-edge: #67e8f9;
  --gl-brand-sheen: rgba(255, 255, 255, 0.34);
  --gl-brand-shadow: rgba(2, 132, 199, 0.5);
  --gl-brand-pin: #f43f5e;

  /* ---- shape and space --------------------------------------------------- */
  --gl-radius-sm: 8px;
  --gl-radius-md: 12px;
  --gl-radius-lg: 16px;
  --gl-radius-pill: 999px;
  /* Buttons and fields, at every size. */
  --gl-radius-control: 10px;
  --gl-space-1: 4px;
  --gl-space-2: 8px;
  --gl-space-3: 12px;
  --gl-space-4: 16px;
  --gl-space-5: 24px;
  --gl-space-6: 32px;
  /* Heights of a button or a field. lg is the finger size (44px). */
  --gl-control-sm: 32px;
  --gl-control-md: 38px;
  --gl-control-lg: 44px;
  /* A button's label at each of those heights, in one weight: .gl-btn
     (gl-components.css) and every older button class that takes its look
     (docs/DESIGN.md). The line height lets a long label wrap to a second
     line inside the button, which then grows from its height. */
  --gl-btn-font-sm: 12px;
  --gl-btn-font-md: 12.5px;
  --gl-btn-font-lg: 14px;
  --gl-btn-pad-sm: 10px;
  --gl-btn-pad-md: 12px;
  --gl-btn-pad-lg: 16px;
  --gl-btn-weight: 600;
  --gl-btn-line: 1.2;

  /* ---- type -------------------------------------------------------------- */
  --gl-font-body: 'Inter', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gl-font-head: 'PantonMtav3', 'Inter', 'Noto Sans Georgian', -apple-system, sans-serif;
  --gl-font-mono: 'JetBrains Mono', 'Noto Sans Georgian', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- depth ------------------------------------------------------------- */
  --gl-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --gl-shadow-2: 0 20px 46px -18px rgba(0, 0, 0, 0.85);
  --gl-shadow-lg: 0 16px 36px -10px rgba(0, 0, 0, 0.65);

  /* ---- motion ------------------------------------------------------------ */
  --gl-dur-fast: 120ms;
  --gl-dur: 180ms;
  --gl-dur-slow: 260ms;
  --gl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="day"] {
  --gl-bg: #e9eef5;
  --gl-surface-0: #f4f6f9;
  --gl-surface-1: #ffffff;
  --gl-surface-2: #f1f4f8;
  --gl-surface-3: #e6ebf1;
  --gl-overlay: rgba(15, 23, 42, 0.4);

  /* On white and on the greyest day surface (#e6ebf1): text ≥14.8:1,
     text-2 ≥8.6:1, muted ≥5.3:1, subtle ≥4.5:1. */
  --gl-text: #0f172a;
  --gl-text-2: #334155;
  --gl-muted: #516077;
  --gl-subtle: #5b6b82;
  --gl-placeholder: #5b6b82;

  --gl-border: rgba(15, 23, 42, 0.09);
  --gl-border-strong: rgba(15, 23, 42, 0.17);
  --gl-control-line: #7a889c;

  --gl-tint-1: rgba(15, 23, 42, 0.04);
  --gl-tint-2: rgba(15, 23, 42, 0.07);
  --gl-tint-3: rgba(15, 23, 42, 0.095);

  --gl-accent-ink: #1d4ed8;
  --gl-accent-soft: rgba(37, 99, 235, 0.1);
  --gl-accent-ring: rgba(37, 99, 235, 0.35);
  --gl-focus: #1d4ed8;

  /* The 600 shades were 3.1–3.5:1 as text on the day panels. The colours
     are ≥4.5:1 on white; the inks keep ≥4.5:1 on every day surface. */
  --gl-success: #15803d;
  --gl-success-ink: #166534;
  --gl-success-soft: rgba(22, 163, 74, 0.1);
  --gl-warning: #b45309;
  --gl-warning-ink: #92400e;
  --gl-warning-soft: rgba(217, 119, 6, 0.1);
  --gl-danger: #dc2626;
  --gl-danger-ink: #b91c1c;
  --gl-danger-soft: rgba(220, 38, 38, 0.08);
  --gl-tone-permit: 225, 29, 72;
  --gl-tone-sheets: 124, 58, 237;
  --gl-tone-files: 22, 163, 74;

  /* The sky-blue "CAD" was 2:1 on the day header. */
  --gl-brand-ink: #0369a1;

  --gl-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px -18px rgba(15, 23, 42, 0.35);
  --gl-shadow-2: 0 18px 40px -22px rgba(15, 23, 42, 0.4);
  --gl-shadow-lg: 0 10px 26px -12px rgba(15, 23, 42, 0.28);
}

/* Motion: for someone who has asked their system for less of it, every
   transition and animation finishes at once — on every page. A duration of
   almost zero, not `none`, so code waiting on animationend/transitionend still
   hears it. A page that must keep something turning (a busy spinner) says so
   with its own !important rule, which wins by being more specific. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gl-dur-fast: 0.01ms;
    --gl-dur: 0.01ms;
    --gl-dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}