/* ============================================================
   Licensing Australia — Design Tokens
   Premium editorial system for an Australian builder-licensing
   professional services brand. Serif display + technical sans,
   warm ink-on-paper palette with brass and terracotta accents.
   ============================================================ */

/* --- Webfonts (Google Fonts) --------------------------------- */
/* Substitutions flagged in README — replace with licensed
   custom faces if the brand has them. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- CORE NEUTRALS — "Ink on Paper" --------------- */
  --ink-1000: #0B1822;   /* deepest — navy ink for body type     */
  --ink-900:  #11212E;   /* primary surface (dark mode), nav     */
  --ink-800:  #1B2C3A;   /* card on dark                          */
  --ink-700:  #2D3D4A;   /* hairlines on dark                     */
  --ink-500:  #5B6A75;   /* muted body on light                   */
  --ink-300:  #98A3AC;   /* placeholders                          */

  --paper-100: #FBF7F0;  /* page background — warm off-white      */
  --paper-200: #F4EEE3;  /* card / panel                           */
  --paper-300: #EBE3D3;  /* divider / well                         */
  --paper-400: #D9CFBA;  /* hairline on paper                      */

  /* ---------- BRAND ACCENTS -------------------------------- */
  --brass-700: #8A6D2C;  /* deep brass — strong CTA               */
  --brass-600: #B08A3A;  /* brass — primary accent                */
  --brass-500: #C9A876;  /* warm sand — soft accent / hover       */
  --brass-200: #EFE3C7;  /* brass wash                            */

  --terracotta-700: #7E3322;
  --terracotta-600: #A1452F;  /* brick — secondary accent         */
  --terracotta-200: #F1DDD3;

  --eucalypt-700: #3F4F39;
  --eucalypt-600: #5B6E50;    /* heritage muted green             */
  --eucalypt-200: #DEE4D5;

  /* ---------- SEMANTIC ------------------------------------- */
  --bg:           var(--paper-100);
  --bg-elevated:  var(--paper-200);
  --bg-well:      var(--paper-300);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-300);
  --fg-inverse:   var(--paper-100);

  --border:       var(--paper-400);
  --border-strong: var(--ink-300);
  --border-inverse: var(--ink-700);

  --accent:        var(--brass-600);
  --accent-strong: var(--brass-700);
  --accent-soft:   var(--brass-200);

  --success: #466B3B;
  --warning: var(--brass-700);
  --danger:  var(--terracotta-700);

  /* ---------- TYPE FAMILIES -------------------------------- */
  --font-serif:  "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:   "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (fluid-ish, fixed for slide use) -- */
  --t-display-xl: 96px;
  --t-display-l:  72px;
  --t-display-m:  56px;
  --t-display-s:  44px;
  --t-h1: 40px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-body-l: 18px;
  --t-body:   16px;
  --t-body-s: 14px;
  --t-caption: 12px;
  --t-eyebrow: 11px;

  /* ---------- SPACING ------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADII --------------------------------------- */
  /* Premium / editorial → sparing rounding. 0 is the default
     for editorial blocks; 2–4px for inputs; 999px only for
     pill chips/avatars. NO large rounded corners. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- SHADOWS ------------------------------------- */
  /* Used VERY sparingly. Brand is mostly flat with hairlines.  */
  --shadow-1: 0 1px 0 rgba(11, 24, 34, .04), 0 1px 2px rgba(11, 24, 34, .06);
  --shadow-2: 0 8px 24px -8px rgba(11, 24, 34, .14);
  --shadow-3: 0 28px 60px -28px rgba(11, 24, 34, .35);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- MOTION -------------------------------------- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-soft:     cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Element defaults — apply on demand by scoping
   in :where(.la-prose) or similar; not auto-applied globally.
   ============================================================ */
:where(.la-prose) {
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  text-wrap: pretty;
}

:where(.la-prose) h1, :where(.la-display) {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-display-l);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--fg);
  text-wrap: balance;
}
:where(.la-prose) h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-display-s);
  line-height: 1.05;
  letter-spacing: -.012em;
  text-wrap: balance;
}
:where(.la-prose) h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -.005em;
}
:where(.la-prose) h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.3;
}
:where(.la-prose) p {
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--ink-1000);
  max-width: 64ch;
}
:where(.la-eyebrow) {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-700);
}
:where(.la-caption) {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: .04em;
  color: var(--fg-muted);
}
:where(.la-mono) {
  font-family: var(--font-mono);
  font-size: var(--t-body-s);
  letter-spacing: -.01em;
}