/* ==========================================================================
   Thanlwin Legal — Design Tokens
   Colors, type, spacing, radii, shadows.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --------------------------------------------------------------------
     COLOR — Brand
     -------------------------------------------------------------------- */
  --crimson-900: #6D1B23;   /* deep press / pressed states */
  --crimson-800: #821F2A;
  --crimson-700: #9D2833;   /* PRIMARY — exact logo crimson */
  --crimson-600: #B33340;
  --crimson-500: #C95566;
  --crimson-400: #DD8590;
  --crimson-300: #EBB1B8;
  --crimson-200: #F4D5D9;
  --crimson-100: #FAEBED;
  --crimson-50:  #FDF6F7;

  --gold-700:    #B8860B;   /* darker gold for text on cream */
  --gold-600:    #D4A41C;
  --gold-500:    #F8C745;   /* gold ornament from logo */
  --gold-400:    #FFD343;   /* lighter logo gold */
  --gold-300:    #FFE082;
  --gold-200:    #FFEEB3;
  --gold-100:    #FFF7DD;

  /* Cream / parchment neutrals — warmer than pure white, in keeping
     with traditional legal stationery */
  --cream-50:    #FBF8F3;
  --cream-100:   #F5F0E6;
  --cream-200:   #E8DFCC;
  --cream-300:   #D4C5A8;

  /* Ink — warm near-blacks for text */
  --ink-900:     #1A1310;   /* deepest body text */
  --ink-800:     #2B201A;
  --ink-700:     #3D2F26;   /* primary body */
  --ink-600:     #5A4A3F;
  --ink-500:     #7A6B5F;   /* secondary text */
  --ink-400:     #9C8E82;   /* tertiary / muted */
  --ink-300:     #BDB2A8;
  --ink-200:     #DDD5CB;
  --ink-100:     #EFEAE2;

  /* --------------------------------------------------------------------
     COLOR — Semantic
     -------------------------------------------------------------------- */
  --color-bg:           var(--cream-50);
  --color-bg-elevated:  #FFFFFF;
  --color-bg-sunken:    var(--cream-100);
  --color-bg-inverse:   var(--crimson-700);
  --color-bg-ink:       var(--ink-900);

  --color-fg:           var(--ink-900);    /* primary text */
  --color-fg-muted:     var(--ink-600);    /* secondary text */
  --color-fg-subtle:    var(--ink-500);    /* tertiary, captions */
  --color-fg-faint:     var(--ink-400);    /* placeholders */
  --color-fg-inverse:   #FFFFFF;
  --color-fg-on-crimson: #FFFFFF;

  --color-accent:       var(--crimson-700);
  --color-accent-hover: var(--crimson-800);
  --color-accent-press: var(--crimson-900);

  --color-gold:         var(--gold-500);
  --color-gold-fg:      var(--gold-700);   /* readable gold for text */

  --color-border:       var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-faint: var(--cream-200);
  --color-divider:      var(--cream-200);

  --color-success:      #2D7A4F;
  --color-warning:      #B8860B;
  --color-danger:       #9D2833;          /* same family as brand */
  --color-info:         #2D5A7A;

  /* --------------------------------------------------------------------
     TYPOGRAPHY — Families
     -------------------------------------------------------------------- */
  /* Display / wordmark — classical Roman caps style.
     SUBSTITUTION NOTE: logo wordmark appears to be Trajan Pro or similar
     classical inscription face. Cormorant Garamond is the closest free
     alternative on Google Fonts. Flag for designer review. */
  --font-display:  'Cormorant Garamond', 'Cormorant', 'Trajan Pro',
                   'Adobe Garamond Pro', Garamond, 'Times New Roman', serif;

  /* Body serif — long-form prose, contracts, articles */
  --font-serif:    'Source Serif 4', 'Source Serif Pro', Charter,
                   'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* UI sans — buttons, navigation, forms, data */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, system-ui, sans-serif;

  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --------------------------------------------------------------------
     TYPOGRAPHY — Scale (1.250 major-third on display, 1.200 on body)
     -------------------------------------------------------------------- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */
  --text-7xl:   6rem;       /* 96px */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  --tracking-display: 0.08em;   /* generous for ALL CAPS Roman */
  --tracking-eyebrow: 0.18em;   /* very wide for small uppercase labels */
  --tracking-caps:    0.05em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;

  /* --------------------------------------------------------------------
     SPACING — 4px base
     -------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* --------------------------------------------------------------------
     RADII — Conservative. Legal brand = mostly square corners.
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;       /* maximum on cards / inputs */
  --radius-xl:   10px;      /* used sparingly — modals only */
  --radius-pill: 999px;     /* tags / badges */

  /* --------------------------------------------------------------------
     SHADOWS — restrained, paper-like
     -------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(26, 19, 16, 0.05);
  --shadow-sm:  0 1px 3px rgba(26, 19, 16, 0.08), 0 1px 2px rgba(26, 19, 16, 0.04);
  --shadow-md:  0 4px 8px rgba(26, 19, 16, 0.07), 0 2px 4px rgba(26, 19, 16, 0.04);
  --shadow-lg:  0 10px 20px rgba(26, 19, 16, 0.08), 0 4px 8px rgba(26, 19, 16, 0.04);
  --shadow-xl:  0 20px 40px rgba(26, 19, 16, 0.10), 0 8px 16px rgba(26, 19, 16, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(26, 19, 16, 0.06);

  /* Crimson-tinted shadow for accent cards */
  --shadow-crimson: 0 8px 24px rgba(157, 40, 51, 0.18);

  /* --------------------------------------------------------------------
     BORDERS
     -------------------------------------------------------------------- */
  --border-thin:    1px solid var(--color-border);
  --border-strong:  1px solid var(--color-border-strong);
  --border-faint:   1px solid var(--color-border-faint);
  --border-accent:  2px solid var(--color-accent);
  --border-gold:    1px solid var(--gold-500);

  /* Decorative double-rule used in classical legal stationery */
  --rule-double-crimson:
    linear-gradient(to bottom, var(--crimson-700) 0, var(--crimson-700) 1px,
                               transparent 1px, transparent 3px,
                               var(--crimson-700) 3px, var(--crimson-700) 4px) 0 0 / 100% 4px no-repeat;

  /* --------------------------------------------------------------------
     MOTION — restrained, no bounces. Slow, dignified.
     -------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --duration-slower: 500ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-narrow: 720px;     /* article width */
  --container-md:     960px;
  --container-lg:     1200px;
  --container-xl:     1440px;

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   Apply on .ds-content (don't pollute global element styles).
   ========================================================================== */

.ds-content {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background: var(--color-bg);
}

.ds-content h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  margin: 0 0 var(--space-6);
}

.ds-content h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-fg);
  margin: var(--space-12) 0 var(--space-4);
}

.ds-content h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  margin: var(--space-8) 0 var(--space-3);
}

.ds-content h4, .ds-h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  margin: var(--space-6) 0 var(--space-2);
}

.ds-content p, .ds-p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent);
}

.ds-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.ds-display-caps {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.ds-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.ds-content blockquote {
  border-left: 2px solid var(--gold-500);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
}

.ds-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.ds-content a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }

.ds-content hr,
.ds-rule {
  border: 0;
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-8) 0;
}

.ds-rule-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--gold-500);
  margin: var(--space-8) 0;
}
.ds-rule-ornament::before,
.ds-rule-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
  max-width: 120px;
}