/* AATMIC design tokens: color, typography, spacing, effects. */

/* ============================================================
   AATMIC, Color tokens
   Brand palette (per Brand Guideline 2025):
     Crimson  #931131   (primary)
     Gold     #EAC379   (secondary / accent)
   Derived shades use the two brand hues; neutrals are warm.
   ============================================================ */
:root {
  /* ---- Crimson (primary) ---- */
  --crimson-50:  #f8eaee;
  --crimson-100: #f0d2da;
  --crimson-200: #e0a3b3;
  --crimson-300: #cd7088;
  --crimson-400: #b8425f;
  --crimson-500: #a8254a;
  --crimson-600: #931131; /* BRAND */
  --crimson-700: #7c0e2a;
  --crimson-800: #620a21;
  --crimson-900: #470616;

  /* ---- Gold (secondary / accent) ---- */
  --gold-50:  #fdf8ee;
  --gold-100: #faf0d9;
  --gold-200: #f4e0b4;
  --gold-300: #eecf8e;
  --gold-400: #eac379; /* BRAND */
  --gold-500: #d9aa54;
  --gold-600: #bd8c39;
  --gold-700: #976d2c;
  --gold-800: #6f5021;
  --gold-900: #4a3516;

  /* ---- Warm neutrals ---- */
  --ink:        #1f1b18; /* near-black, warm */
  --neutral-900:#2a251f;
  --neutral-800:#3c352e;
  --neutral-700:#564d44;
  --neutral-600:#6f655a;
  --neutral-500:#8c8175;
  --neutral-400:#aaa093;
  --neutral-300:#cabfb0;
  --neutral-200:#e5ddd1;
  --neutral-100:#f1ebe1;
  --neutral-50: #faf6ef; /* warm paper */
  --white:      #ffffff;

  /* ---- Semantic aliases ---- */
  --brand-primary:        var(--crimson-600);
  --brand-primary-hover:  var(--crimson-700);
  --brand-primary-active: var(--crimson-800);
  --brand-accent:         var(--gold-400);
  --brand-accent-hover:   var(--gold-500);

  --text-strong:   var(--ink);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-dark:  var(--neutral-50);
  --text-on-brand: var(--gold-100);
  --text-link:     var(--crimson-600);

  --surface-page:   var(--neutral-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--neutral-100);
  --surface-brand:  var(--crimson-600);
  --surface-brand-deep: var(--crimson-800);
  --surface-accent-soft: var(--gold-50);
  --surface-crimson-soft: var(--crimson-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--gold-300);

  /* ---- Status ---- */
  --success: #2f7d52;
  --warning: #b6822a;
  --danger:  #b3261e;
  --info:    #2f5d8a;

  /* ---- Focus ---- */
  --focus-ring: color-mix(in srgb, var(--gold-400) 70%, transparent);
}

/* ============================================================
   AATMIC, Typography tokens
   Display / headings: Marcellus (brand font)
   Body / UI:          Mulish
   ============================================================ */
:root {
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  /* Weights (Mulish) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;  /* eyebrows / labels, Marcellus all-caps */
}

/* ============================================================
   AATMIC, Spacing, layout & radius tokens
   4px base grid.
   ============================================================ */
:root {
  --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.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-12: 7rem;    /* 112 */
  --space-16: 10rem;   /* 160 */

  /* Section rhythm */
  --section-y: clamp(3.5rem, 8vw, 7rem); /* @kind spacing */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem); /* @kind spacing */

  /* Radius, restrained, editorial */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
}

/* ============================================================
   AATMIC, Effects: shadows, borders, motion
   Shadows are warm-tinted (crimson-brown), never neutral gray.
   ============================================================ */
:root {
  /* Elevation, soft, warm */
  --shadow-xs: 0 1px 2px rgba(71, 6, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(71, 6, 22, 0.08), 0 1px 2px rgba(71, 6, 22, 0.05);
  --shadow-md: 0 4px 14px rgba(71, 6, 22, 0.09), 0 2px 5px rgba(71, 6, 22, 0.05);
  --shadow-lg: 0 14px 36px rgba(71, 6, 22, 0.12), 0 5px 12px rgba(71, 6, 22, 0.06);
  --shadow-xl: 0 28px 64px rgba(71, 6, 22, 0.16);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Hairline border helpers */
  --border-width: 1px;
  --hairline: 1px solid var(--border-subtle);

  /* Motion, calm, no bounce. Editorial fades & gentle lifts. */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */

  /* Gold rule, decorative divider used under eyebrows/headings */
  --gold-rule: linear-gradient(90deg, var(--gold-400), var(--gold-300));

  /* Image protection overlay (for text-over-photo) */
  --overlay-crimson: linear-gradient(180deg, rgba(31,27,24,0) 0%, rgba(71,6,22,0.72) 100%); /* @kind other */
  --overlay-ink: linear-gradient(180deg, rgba(31,27,24,0) 30%, rgba(31,27,24,0.78) 100%); /* @kind other */
}

/* ============================================================
   AATMIC, base element styling & helpers
   Light global resets + brand-default typography.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow / kicker, Marcellus all-caps, gold, tracked */
.aatmic-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  color: var(--gold-600);
}

/* Gold rule divider */
.aatmic-rule {
  width: 56px; height: 3px; border: 0; border-radius: 2px;
  background: var(--gold-rule);
}

::selection { background: var(--gold-200); color: var(--ink); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

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