/* ============================================================
   Amado Advocacia — Design Tokens
   Premium law firm system: ink + bronze on warm paper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: ink (blacks) ---------- */
  --ink:            #0A0908;
  --ink-2:          #1A1816;
  --ink-3:          #2C2823;
  --ink-soft:       #6B655A;
  --ink-faint:      #9A9285;

  /* ---------- Color: bronze (the gold) ---------- */
  --bronze:         #8B6F3D;
  --bronze-deep:    #5C4A2A;
  --bronze-mid:     #A0844F;
  --bronze-light:   #B89968;
  --bronze-pale:    #D9C9A3;
  --bronze-wash:    #F1E9D6;

  /* ---------- Color: paper (warm neutrals) ---------- */
  --paper:          #F5F1E8;
  --paper-soft:     #FAF7F1;
  --paper-deep:     #EBE5D3;
  --paper-pure:     #FFFFFF;

  /* ---------- Color: rules & lines ---------- */
  --rule:           #E5DDC9;
  --rule-strong:    #C9BFA6;
  --rule-bronze:    rgba(139, 111, 61, 0.32);
  --rule-on-ink:    rgba(184, 153, 104, 0.22);

  /* ---------- Semantic ---------- */
  --bg:             var(--paper);
  --bg-elevated:    var(--paper-soft);
  --fg:             var(--ink-2);
  --fg-muted:       var(--ink-soft);
  --accent:         var(--bronze);
  --accent-hover:   var(--bronze-deep);

  --fg-on-ink:        #F1ECDD;
  --fg-on-ink-muted:  #A89F88;
  --accent-on-ink:    var(--bronze-light);

  /* ---------- Type families ---------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(64px, 7.5vw, 112px);
  --fs-display:    clamp(48px, 5.5vw, 80px);
  --fs-h1:         clamp(40px, 4.2vw, 56px);
  --fs-h2:         clamp(30px, 3vw, 40px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-eyebrow:    12px;

  /* ---------- Line-height ---------- */
  --lh-tight:   1.05;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  /* ---------- Tracking ---------- */
  --ls-eyebrow: 0.22em;
  --ls-button:  0.08em;
  --ls-display: -0.01em;
  --ls-tight:   -0.02em;

  /* ---------- Spacing scale ---------- */
  --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;
  --space-11: 192px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs:  0 1px 2px rgba(20, 16, 8, 0.04);
  --shadow-sm:  0 2px 6px rgba(20, 16, 8, 0.06), 0 1px 2px rgba(20, 16, 8, 0.04);
  --shadow-md:  0 8px 24px rgba(20, 16, 8, 0.08), 0 2px 6px rgba(20, 16, 8, 0.05);
  --shadow-lg:  0 20px 48px rgba(20, 16, 8, 0.14), 0 4px 12px rgba(20, 16, 8, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--rule);

  /* ---------- Container ---------- */
  --container-narrow: 720px;
  --container:        1180px;
  --container-wide:   1400px;
  --gutter:           clamp(20px, 4vw, 48px);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}