/* ==========================================================================
   AMPS Design Tokens  —  the single source of truth for visual values.
   Three tiers:  primitives  ->  semantic (alias)  ->  component.
   Only ever reference SEMANTIC (or component) tokens in stylesheets.
   Theming / dark mode = override the semantic tier, never the primitives.
   ========================================================================== */

/* Self-hosted so the console has no third-party font dependency. One variable file per subset covers
   the whole 400-700 range, and unicode-range keeps latin-ext off the wire for the usual English page. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- TIER 1 : PRIMITIVES (raw, role-free — do not use directly) -------- */

  /* Neutral — Slate */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#9aa2ad; --slate-500:#697079; --slate-600:#4b515a; --slate-700:#353a42;  /* de-blued: neutral greys so blue reads only as the accent */
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* Accent — one control blue, --blue-600 #1d62db: a step brighter than the logo's #0a46a5 so the UI stops
     reading muted, and the darkest blue that still clears 3:1 as a checkbox on the dark card. */
  --blue-50:#edf3ff; --blue-100:#cfe0f6; --blue-200:#b5cefc; --blue-300:#6f9ce2;
  --blue-400:#3f76d4; --blue-500:#2f6fea; --blue-600:#1d62db; --blue-700:#0948ab;
  --blue-800:#073784; --blue-900:#052a66;

  /* Status — Green / Amber / Red / (info reuses blue) */
  --green-50:#f0fdf4; --green-200:#bbf7d0; --green-600:#16a34a; --green-700:#15803d;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-500:#f59e0b; --amber-700:#b45309;
  --red-50:#fef2f2;   --red-200:#fecaca;   --red-600:#dc2626;   --red-700:#b91c1c;

  /* Chart-only hues — no status colour carries them */
  --violet-400:#a78bfa; --violet-600:#7c3aed;
  --teal-400:#2dd4bf;   --teal-700:#0f766e;
  --pink-400:#f472b6;   --pink-600:#db2777;
  --olive-300:#bef264;  --olive-700:#65731a;
  --navy-300:#93c5fd;   --navy-800:#1e3a8a;
  --cyan-400:#22d3ee;   --cyan-700:#0e7490;

  /* Spacing — 4px grid, rem-valued */
  --space-0:0;        --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;
  --space-4:1rem;     --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;
  --space-10:2.5rem;  --space-12:3rem;   --space-16:4rem;   --space-20:5rem;

  /* Radius */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-full:9999px;

  /* Typography — Archivo (free OFL grotesque, self-hosted above), system fallback. */
  --font-sans: Archivo, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

  --text-sm:.75rem;  --text-base:.875rem;    /* 12px micro-label · 14px body/app base */
  --text-md:1rem;    --text-lg:1.25rem;  --text-xl:1.5rem;  --text-2xl:1.875rem;  /* h4 16 · h3 20 · h2 24 · h1 30 (~1.25 ladder) */
  --text-display: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem); /* marketing/portal hero only */

  --control-h: 2.25rem;   /* one height for buttons, inputs, selects and label-left rows, so they always line up */

  --leading-tight:1.25; --leading-snug:1.4; --leading-normal:1.5;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-.02em; --tracking-snug:-.01em;   /* only for large headings (24px+) */

  /* Elevation — borders do most of the work; shadows only for floating UI (soft, slate-tinted) */
  --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / .05), 0 2px 6px -1px rgb(16 24 40 / .07);
  --shadow-md: 0 4px 8px -4px rgb(15 23 42 / .10), 0 2px 4px -2px rgb(15 23 42 / .06);
  --shadow-lg: 0 12px 24px -8px rgb(15 23 42 / .12), 0 4px 8px -4px rgb(15 23 42 / .08);

  /* App-shell dimensions */
  --shell-sidebar-w: 272px;         /* room for the left-aligned wordmark to breathe (cf. Vultr ~274) */
  --shell-brand-h: 56px;            /* logo band at the top of the sidebar */
  --shell-rail-compact: 56px;       /* L1 rail width when a record compresses it (two-layer nav) */
  --shell-context-w: 216px;         /* L2 record context panel; 56 + 216 = 272 = the section rail → no reflow */
  --content-max-width: 1280px;
  --prose-max-width: 65ch;          /* ~50–75 char measure for long-form text (Baymard) */

  /* Data-table system. Read-only tables are content-fit auto-layout; editable/allocation grids and live
     lists opt into table-layout:fixed (layout='fixed'), where these <col> width tokens apply. Each is a
     content/locale-aware ch/rem token, never a baked px. Density drives one row-pad knob. */
  --col-select: 3rem;               /* checkbox column */
  --col-id: 9rem;                   /* record ids incl. padding: SVC-44821, INV-2026-0412 (no wrap) */
  --col-date: 8rem;                 /* "14 Mar 2027" */
  --col-time: 6rem;                 /* "14:32" / durations */
  --col-price: 8rem;                /* right-aligned money */
  --col-actions: 7rem;              /* ~2–3 icon buttons */
  --col-qty: 5rem;                  /* editable quantity spinner — narrower than a price, still fits 4 digits */
  --col-fit: 9rem;                  /* status pills / short flags: fits "Cancellation" on a line */
  --col-name: 16rem;                /* an account name; a long one ellipses */
  --col-type: 14rem;                /* a service type: "Domain Name Registration" */
  --col-datetime: 9rem;             /* "29/10/2026 16:01" */
  --table-pin-shadow: rgb(15 23 42 / .16);  /* edge-shadow COLOUR for a pinned column (gradient) */

  --focus-ring: 2px solid var(--color-focus);

  --focus-ring: 2px solid var(--color-focus);
  --transition: 140ms ease;

  /* ---- TIER 2 : SEMANTIC (intent — the only tier templates reference) ---- */

  /* Surfaces & text */
  --color-canvas:        #f6f8fb;           /* page bg — near-white, so cards separate by border and shadow, not a grey page */
  --color-surface:       #ffffff;           /* cards, tables, panels */
  --color-surface-sunken: #eef2f8;          /* wells, table headers, inset areas — below the canvas */
  --color-surface-hover: #f2f6fc;
  /* Secondary button — white with a 3:1 outline (--color-border-strong), so it reads as a real button on
     both the canvas and white cards without a grey fill. */
  --color-btn-secondary-bg:    #ffffff;
  --color-btn-secondary-hover: #eef2f8;
  --color-sidebar:       #061747;            /* deep navy nav rail; the control blue marks the active item, buttons and links */
  --color-context-panel: #0c2667;            /* L2 record context panel — a step-lighter navy than the rail (light-on-dark, one menu) */
  --color-rail-hover:    rgb(255 255 255 / .10); /* L1 rail hover wash; the rail is dark in both themes, so no dark override */
  --color-rail-active:   var(--blue-600);    /* current section on the L1 rail — the same solid blue as every other selected control */

  --color-text:          #0a0d14;
  --color-text-muted:    #3b4352;
  --color-text-subtle:   #3b4352;   /* kept as dark as muted in light — a lighter grey felt washed-out across a whole page */
  --color-text-hint:     #6b7385;   /* field hints only: one clear step quieter than a label, still 4.7:1 on white */
  --color-text-inverse:  #ffffff;
  --color-text-link:     var(--blue-600);

  /* Borders — low-alpha ink hairlines (read as considered edges, not drawn-on mid-grey lines) */
  --color-border-subtle: rgb(16 24 40 / .08);  /* dividers, table row rules, card edges */
  --color-border:        rgb(16 24 40 / .14);  /* cards, stronger dividers */
  --color-border-strong: #838da0;              /* 3:1 on white — secondary button and other control edges */

  /* Brand / accent / actions — one blue for every control fill and every blue text in light */
  --color-brand:         var(--blue-600);   /* active L2 nav pill, avatar text */
  --color-logo-mark:     #0a46a5;           /* logo "P" — the logo's own blue in light, white in dark */
  --color-accent:        var(--blue-600);   /* solid fills (primary button, selected nav, steppers) */
  --color-accent-hover:  var(--blue-700);
  --color-accent-subtle: var(--blue-50);    /* active-nav tint, selected row */
  --color-accent-text:   var(--blue-600);   /* blue TEXT on neutral surfaces (links, tabs) — lifted to #1a7fff in dark */
  --color-focus:         var(--blue-500);   /* focus ring — lifted in dark so it clears 3:1 on dark surfaces */

  /* Status (bg-tint / border / text / solid-fill) */
  --color-success-bg:var(--green-50); --color-success-border:var(--green-200);
  --color-success-text:var(--green-700); --color-success-solid:var(--green-700);  /* 700 so white-on-solid passes AA on the success button */
  --color-warning-bg:var(--amber-50); --color-warning-border:var(--amber-200);
  --color-warning-text:var(--amber-700); --color-warning-solid:var(--amber-500);
  --color-danger-bg:var(--red-50);    --color-danger-border:var(--red-200);
  --color-danger-text:var(--red-700);    --color-danger-solid:var(--red-600);
  --color-tooltip-bg:#111827; --color-tooltip-text:#f9fafb;   /* dark chip on light UI */
  --color-info-bg:var(--blue-50);     --color-info-border:var(--blue-200);
  --color-info-text:var(--blue-700);     --color-info-solid:var(--blue-600);

  /* Form controls */
  --color-field-bg:        #ffffff;
  --color-field-border:    #838da0;          /* 3:1 on white, so an empty field's edge passes WCAG 1.4.11 */
  --color-field-disabled:  #f2f4f8;
  --color-field-invalid:   var(--red-600);
  --accent-control:        var(--blue-600); /* checked checkbox fill and radio accent-color */
  /* Chart series — a categorical ramp for multi-series charts. Built from the status text colours so
     the series re-theme in dark mode with everything else, and so no chart ever hard-codes a hex.
     Ordered for maximum separation at the front: most charts show two or three series. */
  --chart-1: var(--color-accent-text);
  --chart-2: var(--color-warning-text);
  --chart-3: var(--color-success-text);
  --chart-4: var(--color-danger-text);
  /* 5-7 leave the status palette, which has no fifth hue (info is the accent blue): a violet, the neutral
     grey and a teal, so the 7-day CDR charts never draw two days in one hue. 5 and 7 clear 3:1 on the card
     and lift in dark below. Donuts keep the grey for "Other"; 8-11 exist so a top-10 donut never repeats a hue. */
  --chart-5: var(--violet-600);
  --chart-6: var(--color-text-subtle);
  --chart-7: var(--teal-700);
  --chart-8: var(--pink-600);
  --chart-9: var(--olive-700);
  --chart-10: var(--navy-800);
  --chart-11: var(--cyan-700);
}

/* ---- Dark mode scaffold (override SEMANTIC tier only) --------------------
   Not shipped yet, but defined now so enabling it is a token swap, not a
   refactor. Activated by [data-theme="dark"] (server-rendered class) and,
   for users with no explicit choice, prefers-color-scheme. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas:#0f0f10; --color-surface:#1a1a1d; --color-surface-sunken:#141416;
  --color-surface-hover:#222226; --color-sidebar:#1c1c21; --color-context-panel:#26262c; /* near-black rail a clear step above the canvas, so the menu separates from the page */
  --color-btn-secondary-bg:#222226; --color-btn-secondary-hover:#2c2c32;  /* already steps off the dark canvas */
  --color-text:#f4f6fb; --color-text-muted:#b8bfca; --color-text-subtle:#8a93a0; --color-text-hint:#8a93a0;
  --color-text-link:#1a7fff;
  --color-border-subtle:rgb(255 255 255 / .08); --color-border:rgb(255 255 255 / .14);
  --color-border-strong:rgb(255 255 255 / .36);  /* 3.3:1 on the card, like the field edge */
  /* control fills (brand, accent, rail-active, accent-control) keep the light blue — white text 5.5:1, a
     checkbox 3.2:1 on the card — so only the text blues below lift */
  --color-logo-mark:#ffffff;                 /* logo is all-white on dark */
  --color-accent-subtle:#0f2547;
  --color-accent-text:#1a7fff;
  --color-focus:#4d94ff;                     /* lighter than light mode so the focus ring clears 3:1 on dark surfaces */
  --color-field-bg:#1a1a1d; --color-field-border:rgb(255 255 255 / .36);  /* 3.3:1 on the card (WCAG 1.4.11) */
  --color-field-disabled:#222226;
  /* status: dark tints + lifted text */
  --color-success-bg:#0e2a1a; --color-success-border:#1d5235; --color-success-text:#4ade80;
  --color-warning-bg:#2a2109; --color-warning-border:#5a4711; --color-warning-text:#fbbf24;
  --color-danger-bg:#2a1416;  --color-danger-border:#5a2026;  --color-danger-text:#f87171;
  --color-tooltip-bg:#f1f5f9; --color-tooltip-text:#0f172a;   /* light chip on dark UI */
  --table-pin-shadow: rgb(0 0 0 / .55);   /* darker edge-shadow so the pin reads on a dark surface */
  --color-info-bg:#0e1f3a;    --color-info-border:#1d3a66;    --color-info-text:#4d94ff;
  --chart-5:var(--violet-400); --chart-7:var(--teal-400);
  --chart-8:var(--pink-400); --chart-9:var(--olive-300); --chart-10:var(--navy-300); --chart-11:var(--cyan-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas:#0f0f10; --color-surface:#1a1a1d; --color-surface-sunken:#141416;
    --color-surface-hover:#222226; --color-sidebar:#1c1c21; --color-context-panel:#26262c; /* near-black rail a clear step above the canvas, so the menu separates from the page */
    --color-btn-secondary-bg:#222226; --color-btn-secondary-hover:#2c2c32;  /* already steps off the dark canvas */
    --color-text:#f4f6fb; --color-text-muted:#b8bfca; --color-text-subtle:#8a93a0; --color-text-hint:#8a93a0;
    --color-text-link:#1a7fff;
    --color-border-subtle:rgb(255 255 255 / .08); --color-border:rgb(255 255 255 / .14);
    --color-border-strong:rgb(255 255 255 / .36);
    --color-logo-mark:#ffffff;
    --color-accent-subtle:#0f2547;
    --color-accent-text:#1a7fff;
    --color-focus:#4d94ff;
    --color-field-bg:#1a1a1d; --color-field-border:rgb(255 255 255 / .36);
    --color-field-disabled:#222226;
    --color-success-bg:#0e2a1a; --color-success-border:#1d5235; --color-success-text:#4ade80;
    --color-warning-bg:#2a2109; --color-warning-border:#5a4711; --color-warning-text:#fbbf24;
    --color-danger-bg:#2a1416;  --color-danger-border:#5a2026;  --color-danger-text:#f87171;
  --color-tooltip-bg:#f1f5f9; --color-tooltip-text:#0f172a;   /* light chip on dark UI */
  --table-pin-shadow: rgb(0 0 0 / .55);   /* darker edge-shadow so the pin reads on a dark surface */
    --color-info-bg:#0e1f3a;    --color-info-border:#1d3a66;    --color-info-text:#4d94ff;
    --chart-5:var(--violet-400); --chart-7:var(--teal-400);
    --chart-8:var(--pink-400); --chart-9:var(--olive-300); --chart-10:var(--navy-300); --chart-11:var(--cyan-400);
  }
}