/*
 * getdomains.lk design tokens.
 *
 * Every value here was read out of Siraj's designs (Dashboard.dc.html,
 * Checkout.dc.html) or the brand kit README, not invented. The designs use
 * literal hex inline; this file is the one place those literals live, so a
 * brand change is one edit rather than a find-and-replace across components.
 *
 * Rule for anything built on top: no raw hex, no raw pixel radius. If a value
 * is missing here, it is missing from the designs too — ask before inventing.
 */
/* The brand kit's variable Hanken Grotesk (fonts/web), self-hosted: OFL, see /fonts/OFL.txt. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand, from getdomains-brand-kit/colors.json ──────────────────── */
  --ink: #141413;
  --paper: #f5f4f1;
  --white: #ffffff;
  --saffron: #e34b00;        /* accent on light */
  --saffron-bright: #ff681d; /* accent on dark */
  --hairline: #e2e1dd;

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --canvas: var(--paper);
  --surface: var(--white);
  --surface-soft: #fbfaf8;   /* a white card that needs to sit back a step */
  --surface-sunk: #f0efeb;   /* a block inside a card */
  --surface-pressed: #eae8e3;/* the sidebar's current section (Dashboard.dc.html) */

  /* ── Lines ─────────────────────────────────────────────────────────── */
  --line: var(--hairline);
  --line-soft: #eeede9;      /* dividers inside a card */
  --line-strong: #d6d4ce;    /* a control's own outline */
  --line-hover: #c9c7c1;     /* an outlined button under the pointer (Checkout: Continue with Google) */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text-strong: var(--ink); /* headings, names, numbers */
  --text: #55544f;           /* body */
  --text-muted: #6e6d68;     /* captions, secondary cells */
  --text-faint: #a9a7a1;     /* placeholders, disabled */
  --text-ghost: #b5b3ad;     /* the landing search's placeholder, and a taken name's ending */
  /* The landing map (Landing Page.html): its resting dots, and the colour the ripple warms them to. */
  --map-dot: #d6d4ce;
  --map-ripple: #ba7652;
  --on-ink: var(--paper);
  --on-primary: var(--white);

  /* ── Roles ─────────────────────────────────────────────────────────── */
  --primary: var(--saffron);
  --primary-hover: #b23c00;
  --primary-soft: #fff0e6;   /* chips, selected rows */
  --primary-softer: #fff5ee;
  --primary-line: #f6dccb;
  --success: #1f7a4d;
  --success-soft: #e7f3ec;
  --danger: #c0261c;

  /* ── Card brand chips on Billing (Dashboard.dc.html CHIP) ─────────── */
  --card-chip-visa: #1a1f71;
  --card-chip-amex: #2e77bb;
  --card-chip: var(--text-muted);

  /* ── Rounding ──────────────────────────────────────────────────────── */
  --radius-sm: 10px;   /* menu items, list rows, small tiles */
  --radius-md: 12px;   /* inputs, blocks inside a card */
  --radius-code: 14px; /* the sign-in code field (Checkout.dc.html) */
  --radius-lg: 18px;   /* cards */
  --radius-xl: 20px;   /* panels */
  --radius-2xl: 24px;  /* the largest containers */
  --radius-3xl: 28px;  /* the landing page's results panel (Landing Page.html) */
  --radius-full: 999px;/* buttons, chips, pills, avatars */

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-sans: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;  /* the default */
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 22px;
  --text-4xl: 28px;
  --text-title: 32px; /* sign-in and checkout card titles (Checkout.dc.html) */
  --text-5xl: 36px;   /* page titles: "Domains", "Account" */
  --text-6xl: 44px;   /* a domain's name on its own page */
  --text-hero: clamp(44px, 8vw, 88px); /* the landing headline */

  --weight-light: 300;     /* the "get" in the wordmark */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;     /* the "domains.lk" in the wordmark */

  /* The wordmark is set tight; so are large headings. */
  --tracking-tight: -0.05em;
  --tracking-title: -0.04em; /* the card titles, a touch looser than the wordmark */

  /* ── Space, 4px scale ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 19, 0.1); /* menus, popovers, modals */
  --shadow-search: 0 1px 2px rgba(20, 20, 19, 0.04), 0 12px 40px -12px rgba(20, 20, 19, 0.12); /* the landing search box */
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.2); /* a switch's knob */

  /* ── Layout ────────────────────────────────────────────────────────── */
  --page-max: 1200px;  /* the public header (Landing Page.html) */
  --page-pad-x: 32px;
  --side-w: 248px;     /* the dashboard sidebar */
  --dash-max: 1040px;  /* the dashboard's column beside it */
  --land-max: 680px;   /* the landing search box and its results */
  --land-search-h: 76px;
  --land-go: 56px;
  --control-h: 46px;  /* the height buttons and inputs line up on */
  /* The sign-in card's own sizes, a step larger than the dashboard's (Checkout.dc.html). */
  --auth-btn-h: 52px;
  --auth-input-h: 48px;
  --auth-gap: 18px;      /* between the card's rows */
  --auth-gap-tight: 6px; /* title to lede, label to field */
  --auth-max: 480px;
}

/*
 * Dark mode is NOT in Siraj's designs — the brand kit names the three dark
 * pairings (Ink background, Paper text, Saffron Bright accent) and nothing
 * between them. The greys below are derived, not designed, so treat them as a
 * placeholder and get them confirmed before shipping a dark theme.
 */
:root[data-theme="dark"] {
  --canvas: var(--ink);
  --surface: #1c1c1a;
  --surface-soft: #232320;
  --surface-sunk: #2a2a27;
  --surface-pressed: #2f2f2b;
  --text-ghost: #6a6863;
  --map-dot: #3a3834;
  --map-ripple: #8a4a26;
  --line: #322f2c;
  --line-soft: #2a2a27;
  --line-strong: #44413c;
  --line-hover: #57534d;
  --text-strong: var(--paper);
  --text: #d8d6d0;
  --text-muted: #a9a7a1;
  --text-faint: #7a7872;
  --primary: var(--saffron-bright);
  --primary-hover: #ff7d3c;
  --primary-soft: #2e1d13;
  --primary-softer: #261810;
  --primary-line: #3d2517;
  --success-soft: #16281f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-strong); text-decoration: none; }
a:hover { color: var(--primary); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }

/* Money and dates line up in tables. */
.is-numeric { font-variant-numeric: tabular-nums; text-align: right; }