/* ─────────────────────────────────────────────────────────
   LocalVault — Design tokens
   Warm paper · ink · single signal · Swiss editorial.

   Use this in any HTML artifact:
     <link rel="stylesheet" href="colors_and_type.css">

   FONTS ARE NOT DECLARED HERE — on purpose.

   This file is tokens only, so an application can import it without also
   inheriting a request to fonts.googleapis.com. The product promises no data
   leaves the building, and a runtime request to Google is a request that
   leaves the building; that must not arrive by accident through a token
   import.

   · previews and throwaway mocks: use styles.css, which pulls fonts-cdn.css
   · anything shipped: self-host (see fonts/README.md) and link fonts.css
   ───────────────────────────────────────────────────────── */

:root {
  /* ── Paper & ink — warm neutral scale, slightly off-white ── */
  --paper:        #FAFAF7;   /* app bg, "bone" */
  --paper-2:      #F4F2EC;   /* secondary surface */
  --paper-3:      #ECEAE3;   /* hover, sunken */
  --card:         #FFFFFF;
  --hairline:     #E3E0D8;   /* default 1px border — cards, dividers, tables, sidebars */
  --hairline-2:   #D5D1C5;   /* heavier 1px — inputs, neutral badges, secondary buttons.
                                also used DASHED to signal "not-yet-content" (drop zones). */
  --ink:          #0B0B09;   /* near-black, warm */
  --ink-2:        #2A2823;
  --ink-3:        #57544B;   /* muted */
  --ink-4:        #8A8678;   /* placeholder */
  --ink-5:        #B8B4A6;   /* disabled */

  /* ── Signal — Swiss red, used SPARINGLY ── */
  --signal:       #DC0000;
  --signal-soft:  #FCE5E0;
  --signal-ink:   #8B0500;
  --on-signal:    #FFFFFF;

  /* ── Semantic — tuned to sit quietly next to the signal.
        Fills use the base colour; soft-filled labels pair `-soft` with `-ink`,
        the same pairing as signal. ── */
  --success:      #1B7A3B;
  --success-soft: #DCEFE0;
  --success-ink:  #14622F;
  --warning:      #B07000;
  --warning-soft: #F8EBC8;
  --warning-ink:  #8A5600;
  --danger:       #B6261E;
  --danger-hover: #8F1D17;
  --danger-soft:  #F7DAD7;
  --danger-ink:   #8F1D17;
  --on-danger:    #FFFFFF;
  --info:         #1F4ED8;
  --info-soft:    #E0E8FA;
  --info-ink:     #1740B0;

  /* ── Service tints — whispers, never page-wide fills.
        Quattordici servizi, tinte equidistanti sulla ruota OKLCH a L 0.925 / C 0.026,
        con una banda di guardia attorno al rosso di marca (#DC0000, h 29) che nessun
        servizio attraversa. Ogni tint condivide la tinta del proprio `--accent-*`. ── */
  /* Area di lavoro */
  --tint-docs:          #DBE7F8;
  --tint-chat:          #D3EBF0;
  --tint-wiki:          #E9E3F5;
  --tint-mail:          #F4E0EA;
  --tint-drive:         #E3E9D6;

  /* Crea */
  --tint-transcribe:    #D6EAF5;
  --tint-translate:     #D7ECE2;
  --tint-summarize:     #EAE7D3;
  --tint-image:         #E2E5F8;
  --tint-video:         #F1E4D4;
  --tint-code:          #D4ECE9;

  /* Gestione */
  --tint-billing:       #DDEBDB;
  --tint-work:          #F5E2D7;

  /* Automatizza */
  --tint-agent:         #EFE1F0;

  /* Deprecati: servizi ritirati dal catalogo (ocr assorbito da Docs, voice da
     Transcribe, sql non promosso a servizio). Alias per una release, poi via. */
  --tint-ocr:           var(--tint-docs);
  --tint-voice:         var(--tint-transcribe);
  --tint-sql:           var(--tint-billing);

  /* ── Service accents — il colore pieno del badge e del glifo nell'icona.
        Tarati tutti allo stesso contrasto sul bianco (4.6:1), così il glifo bianco
        resta leggibile identico su ogni servizio. Mai come fondo di pagina. ── */
  /* Area di lavoro */
  --accent-docs:        #2B74D1;
  --accent-chat:        #028193;
  --accent-wiki:        #8C5EC8;
  --accent-mail:        #BB4D8E;
  --accent-drive:       #687D02;

  /* Crea */
  --accent-transcribe:  #047DAC;
  --accent-translate:   #048562;
  --accent-summarize:   #877403;
  --accent-image:       #6669D4;
  --accent-video:       #9E6B02;
  --accent-code:        #04837D;

  /* Gestione */
  --accent-billing:     #248626;
  --accent-work:        #B95B01;

  /* Automatizza */
  --accent-agent:       #A854B0;

  /* ── Radii (overridden by density) ── */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 10px;

  /* ── Spacing scale (4px base) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── Type families ── */
  --font-display: "Hanken Grotesk", "Inter Tight", -apple-system, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Type scale ── */
  --fs-display:   72px;   /* hero */
  --fs-h1:        56px;
  --fs-h2:        32px;
  --fs-h3:        20px;
  --fs-h4:        15px;
  --fs-body-lg:   17px;
  --fs-body:      14px;
  --fs-sm:        13px;
  --fs-caption:   12px;
  --fs-meta:      11px;
  --fs-micro:     10px;

  /* ── Shadows — restrained. Cards use HAIRLINES not shadows. ── */
  --shadow-1:   0 1px 0 rgba(11,11,9,0.04);
  --shadow-2:   0 1px 2px rgba(11,11,9,0.06), 0 0 0 0.5px rgba(11,11,9,0.04);
  --shadow-3:   0 4px 16px rgba(11,11,9,0.08), 0 0 0 0.5px rgba(11,11,9,0.04);
  --shadow-pop: 0 12px 40px rgba(11,11,9,0.12), 0 0 0 0.5px rgba(11,11,9,0.08);

  /* ── Component heights ── */
  --h-control-sm: 28px;
  --h-control-md: 34px;
  --h-control-lg: 42px;
  --h-topbar:     48px;
  --w-sidebar:    232px;

  /* ── Breakpoints — the marketing site and admin views collapse here.
        The product app assumes desktop; below --bp-md the sidebar collapses
        to 56px, below --bp-sm it becomes a drawer. ── */
  --bp-sm:  640px;
  --bp-md:  960px;
  --bp-lg:  1280px;
  --bp-xl:  1600px;
}

/* ─────────────────────────────────────────────────────────
   Dark — for terminal/admin contexts. Light is the default
   on every customer-facing surface.
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --paper:        #0B0B09;
  --paper-2:      #14130F;
  --paper-3:      #1E1C17;
  --card:         #15140F;
  --hairline:     #28261F;
  --hairline-2:   #3A3830;
  --ink:          #F2F0E8;
  --ink-2:        #D8D4C7;
  --ink-3:        #9C9788;
  --ink-4:        #6E6A5E;
  --ink-5:        #3E3C34;

  --signal-soft:  #2A0E0A;
  --signal-ink:   #FCB6AB;

  /* Semantic fills keep their light values — they read correctly on dark.
     The soft/ink pairing inverts: dark tint behind a light foreground. */
  --success-soft: #0E2A17;
  --success-ink:  #7BD69A;
  --warning-soft: #2C2109;
  --warning-ink:  #E8BC5A;
  --danger-hover: #D4463D;
  --danger-soft:  #2E100D;
  --danger-ink:   #F0968C;
  --info-soft:    #101C3C;
  --info-ink:     #9DB8FF;

  --shadow-2: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.04);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.04);
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — display family, tight tracking. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.1;  letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }

p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── Mono utilities — numbers, model names, IDs, code ── */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero", "ss01";
}
.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow — SPARING use for technical section labels.
   For human-readable metadata (names, dates), use .label-sm. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-sm {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--ink-3);
}

/* ── Card primitive — hairline border, no shadow ── */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}

/* ── Hairline rule label (Swiss data block header) ── */
.rule-label {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}
.rule-label .dot {
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
}
.rule-label .count {
  margin-left: auto;
  color: var(--ink-3);
}

/* ── Selection — flag of confederation. Subtle but unmistakable. ── */
::selection { background: var(--signal); color: var(--on-signal); }

/* ── Scrollbars — thin and quiet ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Focus ring — ink, not signal. The signal is for state, not focus. ── */
*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}