/* ==========================================================================
   Accetta Tax & Accounting — design tokens
   Transcribed verbatim from the signed-off Home Concept (client sign-off
   2026-07-23). Values are canon. Do not adjust here to fix a single page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COLOURS
   Pulled from the client logo (lighthouse, in blues).
   Lead with the brighter blues; navy is for headings, hero and footer.
   Beacon gold is HOVER / ACTIVE ONLY, never on a resting element.
   -------------------------------------------------------------------------- */
:root {
  /* Brand blues */
  --blue-navy:    #0E2D5C; /* deep navy: headings, hero bg, footer, wordmark */
  --blue-signal:  #2174B6; /* signal blue, PRIMARY: buttons, links, interactive */
  --blue-sky:     #579AD1; /* sky blue: accents, icons, secondary highlights */
  --blue-mist:    #DCEBF7; /* mist: section bands, card backgrounds */

  /* Accent (interaction signal only) */
  --gold-beacon:      #C9A227; /* beacon gold: hover and active states ONLY */
  --gold-beacon-soft: #E3C969; /* lighter gold for subtle underlines and fills */

  /* Neutrals */
  --neutral-50:  #FAFBFC; /* page background */
  --neutral-100: #EEF2F6; /* subtle band, hover surface */
  --neutral-300: #C9D3DE; /* borders, dividers */
  --neutral-500: #5A6B7B; /* muted text, captions */
  --neutral-900: #1E2A38; /* near-black body text */
  --white:       #FFFFFF;

  /* Semantic aliases */
  --color-primary:       var(--blue-signal);
  --color-primary-hover: var(--gold-beacon);
  --color-accent:        var(--blue-sky);

  --text-heading:    var(--blue-navy);
  --text-body:       var(--neutral-900);
  --text-muted:      var(--neutral-500);
  --text-on-dark:    var(--white);
  --text-link:       var(--blue-signal);
  --text-link-hover: var(--gold-beacon);

  --surface-page:  var(--neutral-50);
  --surface-card:  var(--white);
  --surface-band:  var(--blue-mist);
  --surface-muted: var(--neutral-100);
  --surface-dark:  var(--blue-navy);

  --border-subtle: var(--neutral-300);
  --border-strong: var(--neutral-500);
  --border-focus:  var(--blue-signal);

  /* Status (kept quiet, blue-leaning) */
  --status-success: #1E7A4C;
  --status-warning: #C9A227;
  --status-error:   #B23A3A;
  --status-info:    var(--blue-signal);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   Display and headings: Lora (old-style serif, real letterhead weight).
   Body and subheads: Source Sans 3 (clean, trustworthy sans).
   Sentence case throughout. Body 16px at line-height 1.7.
   -------------------------------------------------------------------------- */
:root {
  /* Families */
  --font-serif-display: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (display = serif, text = sans) */
  --display-2xl: 64px; /* hero headline */
  --display-xl:  52px;
  --display-lg:  40px; /* page and section titles */
  --display-md:  32px;
  --display-sm:  26px; /* card and sub-section titles */

  --text-xl: 22px; /* lead paragraph */
  --text-lg: 18px;
  --text-md: 16px; /* body default */
  --text-sm: 14px;
  --text-xs: 13px; /* captions, eyebrow, legal */

  /* Line heights */
  --leading-tight: 1.12; /* display headlines */
  --leading-snug:  1.3;  /* sub-titles */
  --leading-body:  1.7;  /* paragraphs */

  /* Letter spacing */
  --tracking-eyebrow: 0.12em; /* uppercase eyebrow labels */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;

  /* Semantic roles */
  --type-hero:          var(--weight-semibold) var(--display-2xl)/var(--leading-tight) var(--font-serif-display);
  --type-page-title:    var(--weight-semibold) var(--display-lg)/var(--leading-tight) var(--font-serif-display);
  --type-section-title: var(--weight-semibold) var(--display-md)/var(--leading-snug) var(--font-serif-display);
  --type-card-title:    var(--weight-semibold) var(--display-sm)/var(--leading-snug) var(--font-serif-display);
  --type-lead:          var(--weight-regular) var(--text-xl)/var(--leading-body) var(--font-sans-body);
  --type-body:          var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans-body);
  --type-eyebrow:       var(--weight-semibold) var(--text-xs)/1.4 var(--font-sans-body);
}

/* --------------------------------------------------------------------------
   SPACING, RADII, SHADOWS, LAYOUT, MOTION
   Quiet, restrained system. Soft shadows, modest radii.
   -------------------------------------------------------------------------- */
:root {
  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Section rhythm */
  --section-y:    96px; /* vertical padding for major sections */
  --section-y-sm: 64px;

  /* Radii (modest: established, not playful) */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Borders */
  --border-width:        1px;
  --border-width-strong: 2px;

  /* Shadows (soft, blue-tinted, low spread) */
  --shadow-xs:    0 1px 2px rgba(14, 45, 92, 0.06);
  --shadow-sm:    0 2px 8px rgba(14, 45, 92, 0.08);
  --shadow-md:    0 6px 20px rgba(14, 45, 92, 0.10);
  --shadow-lg:    0 16px 40px rgba(14, 45, 92, 0.14);
  --shadow-focus: 0 0 0 3px rgba(33, 116, 182, 0.30);

  /* Layout */
  --container-max:    1200px;
  --container-narrow: 760px; /* article and prose width */
  --content-gutter:   24px;

  /* Motion (calm, no bounce) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
}

/* --------------------------------------------------------------------------
   RESPONSIVE TOKEN OVERRIDES
   The concept was authored at desktop width. These reduce the display scale
   and section rhythm on smaller viewports without touching any component
   rule, so a page never needs a bespoke mobile size.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --display-2xl: 44px;
    --display-xl:  38px;
    --display-lg:  32px;
    --display-md:  26px;
    --display-sm:  22px;
    --text-xl:     19px;
    --section-y:    64px;
    --section-y-sm: 48px;
  }
}

@media (max-width: 480px) {
  :root {
    --display-2xl: 34px;
    --display-xl:  30px;
    --display-lg:  27px;
    --display-md:  23px;
    --text-xl:     18px;
    --section-y:    48px;
    --section-y-sm: 40px;
    --content-gutter: 20px;
  }
}

/* Respect a reduced-motion preference. Transitions collapse rather than
   disappear, so focus and hover states still change visibly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}