/* ============================================================
   Answrd design system
   Single source of truth for type, colour, spacing, radii and
   interaction states. This file is kept byte-identical between
   answrd-app/src/design-system.css and answrd-website/design-system.css
   so the product and the marketing site are literally the same system.
   ============================================================ */

/* ---- Typeface -------------------------------------------------
   Self-hosted, no external CDN, so nothing here can fail to load
   because a third party is down.

   Archivo for display and UI. A warm grotesque with genuine
   character, and measurably the most legible of the candidates at
   small sizes: x-height 52.6% of em, the highest of the five tested.
   Space Grotesk was considered and rejected at 48.6%.

   Public Sans for body. Built for public-service interfaces where
   legibility is the whole job, x-height 51.7%, open apertures, and
   neutral enough not to fight Archivo's character.

   Both are variable (100-900) and SIL OFL. 62KB for the entire
   type system.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/publicsans-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour ------------------------------------------------
     One navy ladder shared by app and website. The website used to
     run #0A1628 while the app ran #0F1A2E; both now come from here.
     ------------------------------------------------------------ */
  --navy-deep:    #0A1628;  /* deepest ground, website hero, on-amber text */
  --navy:         #0F1A2E;  /* app page background */
  --navy-surface: #1B2D4F;  /* cards and raised surfaces */
  --navy-raised:  #243D6B;  /* hover on a surface */

  --amber:        #E8923A;  /* brand. primary action and active state ONLY */
  --amber-strong: #C97A2E;  /* pressed / hover on amber */
  --amber-quiet:  rgba(232, 146, 58, 0.12); /* tint behind an active state */

  /* Neutral accent. Anything decorative or informational that is not
     a primary action or an active state uses this, so amber keeps
     its meaning and the eye has one place to go. */
  --slate:        #8896A8;
  --slate-quiet:  rgba(136, 150, 168, 0.14);

  --positive:     #4ADE80;
  --negative:     #F87171;

  /* ---- Text tiers -------------------------------------------
     Four tiers, replacing nineteen ad-hoc white alphas. Contrast
     measured against --navy-surface, the worst case:
       primary   13.68:1
       secondary  8.92:1
       tertiary   5.93:1   still passes AA for body text
       disabled   3.29:1   non-content only, never real copy
     ------------------------------------------------------------ */
  --text-primary:   rgba(255, 255, 255, 1);
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary:  rgba(255, 255, 255, 0.60);
  --text-disabled:  rgba(255, 255, 255, 0.38);

  /* Same ladder for light surfaces on the website */
  --ink-primary:   #0A1628;
  --ink-secondary: #384861;
  --ink-tertiary:  #5B6B82;

  /* ---- Hairlines and surfaces -------------------------------- */
  --line-soft:   rgba(255, 255, 255, 0.07);
  --line:        rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.20);
  --fill-soft:   rgba(255, 255, 255, 0.05);
  --fill:        rgba(255, 255, 255, 0.08);

  /* ---- Type scale --------------------------------------------
     Five steps. Every one defines size, weight, line-height and
     tracking, so no call site has to invent them. Body sits at
     15px, up from the 12px that 217 of 236 type instances used.
     ------------------------------------------------------------ */
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Public Sans", ui-sans-serif, system-ui, sans-serif;

  --t-display-size: 2.125rem;  /* 34px */
  --t-display-weight: 700;
  --t-display-lh: 1.06;
  --t-display-ls: -0.028em;

  --t-title-size: 1.375rem;    /* 22px */
  --t-title-weight: 650;
  --t-title-lh: 1.2;
  --t-title-ls: -0.018em;

  --t-heading-size: 1.0625rem; /* 17px */
  --t-heading-weight: 600;
  --t-heading-lh: 1.35;
  --t-heading-ls: -0.006em;

  --t-body-size: 0.9375rem;    /* 15px */
  --t-body-weight: 400;
  --t-body-lh: 1.6;
  --t-body-ls: 0;

  --t-caption-size: 0.78125rem;/* 12.5px */
  --t-caption-weight: 550;
  --t-caption-lh: 1.4;
  --t-caption-ls: 0.045em;

  /* ---- Radii, cut from five values to three plus a pill ------ */
  --r-sm:   10px;  /* inputs, chips, small controls */
  --r-md:   14px;  /* buttons, list rows */
  --r-lg:   20px;  /* cards and panels */
  --r-full: 999px;

  /* ---- Spacing rhythm ----------------------------------------
     Related things sit at --space-group. Unrelated blocks separate
     at --space-section. Replaces uniform mb-6 everywhere.
     ------------------------------------------------------------ */
  --space-tight:   0.5rem;   /*  8px */
  --space-group:   0.75rem;  /* 12px within a group */
  --space-block:   1.25rem;  /* 20px between blocks in a section */
  --space-section: 2rem;     /* 32px between sections */

  /* ---- Elevation --------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.18);
  --shadow-raise: 0 2px 6px rgba(0,0,0,0.32), 0 16px 40px rgba(0,0,0,0.28);

  /* ---- Interaction ------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(232, 146, 58, 0.5);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 160ms;
}

/* ---- Type utilities ----------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
}
.t-title {
  font-family: var(--font-display);
  font-size: var(--t-title-size);
  font-weight: var(--t-title-weight);
  line-height: var(--t-title-lh);
  letter-spacing: var(--t-title-ls);
}
.t-heading {
  font-family: var(--font-display);
  font-size: var(--t-heading-size);
  font-weight: var(--t-heading-weight);
  line-height: var(--t-heading-lh);
  letter-spacing: var(--t-heading-ls);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
}
.t-caption {
  font-family: var(--font-display);
  font-size: var(--t-caption-size);
  font-weight: var(--t-caption-weight);
  line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-ls);
  text-transform: uppercase;
}

/* Tabular figures wherever a number is the point, so digits do not
   jitter as counts change. */
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Focus, applied globally --------------------------------
   The app previously had zero focus styles and 32 elements calling
   outline-none. Keyboard users had no visible focus anywhere.
   -------------------------------------------------------------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Primary action -----------------------------------------
   Navy on amber, 7.43:1. White on amber was 2.44:1 and failed AA
   on the single most-clicked element in the product.
   -------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  padding: 0.875rem 1.25rem;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--amber);
  color: var(--navy-deep);
  border: none;
}
.btn-primary:hover:not(:disabled) { background: var(--amber-strong); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: var(--fill);
  color: var(--text-primary);
  border: 1px solid var(--line);
}
.btn-secondary:hover:not(:disabled) { background: var(--fill-soft); border-color: var(--line-strong); }
.btn-secondary:active:not(:disabled) { transform: translateY(1px); }

/* ---- Surfaces ------------------------------------------------ */
.surface {
  background: var(--navy-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.surface-interactive { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.surface-interactive:hover { border-color: var(--line); background: var(--navy-raised); }

/* ---- Inputs -------------------------------------------------- */
.field {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field::placeholder { color: var(--text-disabled); }
.field:hover { border-color: var(--line-strong); }
.field:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Interactive states for app-specific elements -------------
   The app previously had zero hover states anywhere. These cover
   the elements that are not plain .btn / .field.
   -------------------------------------------------------------- */
.link-amber { transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.link-amber:hover { color: var(--amber-strong) !important; }

.link-quiet { transition: color var(--dur) var(--ease); }
.link-quiet:hover { color: var(--text-primary) !important; }

.nav-tab { cursor: pointer; }
.nav-tab:hover { color: var(--text-secondary) !important; }
.nav-tab[aria-current="page"]:hover { color: var(--amber) !important; }

.cal-day:hover { background: var(--fill) !important; }
.cal-day[aria-pressed="true"]:hover { background: var(--amber-strong) !important; }

.cal-nav { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cal-nav:hover { background: var(--navy-raised); border-color: var(--line-strong); }

/* Any remaining bare button gets a pointer and a gentle press. */
button:not(:disabled) { cursor: pointer; }