/* ============================================================
   AXIA AI — Pottery Palette Design System
   Colors & Type Tokens
   ============================================================
   Four earth colors, one sea. A Greek red-figure vase, in type and color.
   Iron-rich clay fired to terracotta. Iron-black slip. Occasional cream.
   ============================================================ */

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

:root {
  /* ============================================================
     POTTERY PALETTE — the four earth colors + one sea
     ============================================================ */

  /* Primary earth colors */
  --axia-navy:        #0A1628;   /* The "sea" — primary dark, iron-black slip */
  --axia-terracotta:  #C04421;   /* Fired clay — the primary accent */
  --axia-clay:        #A67B4E;   /* Iron-rich clay — warm secondary */
  --axia-alabaster:   #F2EDE3;   /* Cream canvas — paper, documents */

  /* Tonal extensions derived from the palette */
  --axia-navy-900:    #050B14;
  --axia-navy-800:    #0A1628;   /* = navy */
  --axia-navy-700:    #152238;
  --axia-navy-600:    #243350;
  --axia-navy-500:    #3B4A68;

  --axia-terracotta-700: #A13617;
  --axia-terracotta-600: #C04421;  /* = terracotta */
  --axia-terracotta-500: #D05A38;
  --axia-terracotta-300: #E89A82;
  --axia-terracotta-100: #F7DDD2;

  --axia-clay-700:    #7E5A37;
  --axia-clay-600:    #A67B4E;   /* = clay */
  --axia-clay-400:    #C2A07D;
  --axia-clay-200:    #DDC6AC;

  --axia-alabaster-100: #FAF7F1;
  --axia-alabaster-200: #F2EDE3;  /* = alabaster */
  --axia-alabaster-300: #E6DFD1;
  --axia-alabaster-400: #D3CAB7;

  /* Neutral rule (true neutrals, rarely used — prefer alabaster/navy) */
  --axia-ink:         #0A1628;
  --axia-paper:       #F2EDE3;
  --axia-line:        rgba(10, 22, 40, 0.12);
  --axia-line-strong: rgba(10, 22, 40, 0.22);
  --axia-line-faint:  rgba(10, 22, 40, 0.06);

  /* ============================================================
     SEMANTIC COLOR ROLES
     ============================================================ */

  /* Foreground on light (alabaster) surfaces */
  --fg-1: var(--axia-navy);                   /* Primary text */
  --fg-2: rgba(10, 22, 40, 0.72);             /* Secondary */
  --fg-3: rgba(10, 22, 40, 0.52);             /* Tertiary / captions */
  --fg-4: rgba(10, 22, 40, 0.32);             /* Placeholder */
  --fg-accent: var(--axia-terracotta);        /* Accent / link */

  /* Foreground on dark (navy) surfaces */
  --fg-inverse-1: var(--axia-alabaster);
  --fg-inverse-2: rgba(242, 237, 227, 0.72);
  --fg-inverse-3: rgba(242, 237, 227, 0.52);
  --fg-inverse-accent: var(--axia-terracotta-500);

  /* Backgrounds */
  --bg-canvas: var(--axia-alabaster);         /* Default page bg */
  --bg-paper:  var(--axia-alabaster-100);     /* Raised surface, slightly brighter */
  --bg-sunk:   var(--axia-alabaster-300);     /* Sunken surface */
  --bg-inverse: var(--axia-navy);             /* Dark sections */
  --bg-accent: var(--axia-terracotta);        /* Accent fills */

  /* Borders */
  --border-default: var(--axia-line);
  --border-strong:  var(--axia-line-strong);
  --border-faint:   var(--axia-line-faint);

  /* ============================================================
     TYPOGRAPHY — three-era classical conversation
     Cinzel (inscriptional) · Cormorant (Renaissance) · Inter (modern)
     ============================================================ */

  --font-logo:    'Cinzel', 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Type scale (major-third on body, more dramatic on display) */
  --fs-display-xl: 96px;   /* Hero, mockup covers */
  --fs-display-l:  72px;   /* Big display */
  --fs-display-m:  56px;   /* H1 display */
  --fs-display-s:  40px;   /* H2 display */

  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-h6: 14px;

  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body:    1.55;
  --lh-prose:   1.7;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.06em;
  --tr-wider:   0.14em;    /* For Cinzel, labels, overlines */
  --tr-widest:  0.22em;    /* For all-caps logos, chapter marks */

  /* Weights */
  --fw-display-regular: 400;
  --fw-display-medium:  500;
  --fw-body-regular:    400;
  --fw-body-medium:     500;
  --fw-body-semibold:   600;
  --fw-body-bold:       700;
  --fw-logo:            600;  /* Cinzel SemiBold in the wordmark */

  /* ============================================================
     SPACING (8-point grid with 4-point half-steps)
     ============================================================ */
  --space-0:  0;
  --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 — restrained. This is a ceramics brand, not a SaaS.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;   /* Inputs, tags */
  --radius-sm:   4px;   /* Buttons */
  --radius-md:   8px;   /* Cards (rare) */
  --radius-lg:   16px;  /* Modals */
  --radius-pill: 999px; /* Only capsule labels */

  /* ============================================================
     SHADOWS — soft, warm, almost imperceptible.
     Like light on matte ceramic, not glossy cards.
     ============================================================ */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm:   0 2px 6px rgba(10, 22, 40, 0.06),
                 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md:   0 6px 18px rgba(10, 22, 40, 0.08),
                 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-lg:   0 20px 48px rgba(10, 22, 40, 0.12),
                 0 4px 10px rgba(10, 22, 40, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(242, 237, 227, 0.06);

  /* ============================================================
     MOTION — deliberate, not bouncy. Classical, not playful.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   420ms;
  --dur-scene:  700ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES — drop-in presets
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.axia-logotype {
  font-family: var(--font-logo);
  font-weight: var(--fw-logo);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  font-feature-settings: "liga", "kern";
}

.axia-display,
h1.axia,
.display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-regular);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.display-l  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.display-m  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m);  line-height: var(--lh-display); letter-spacing: var(--tr-tight); }
.display-s  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-s);  line-height: var(--lh-display); letter-spacing: var(--tr-tight); }

h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0; }
h3, .h3 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-normal); color: var(--fg-1); margin: 0; }
h4, .h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-normal); color: var(--fg-1); margin: 0; }
h5, .h5 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-heading); letter-spacing: var(--tr-normal); color: var(--fg-1); margin: 0; }

.overline,
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--fg-2);
  letter-spacing: var(--tr-tight);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-prose); }
.body-sm  { font-size: var(--fs-body-sm); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); }
.micro    { font-size: var(--fs-micro);   color: var(--fg-3); letter-spacing: var(--tr-wider); text-transform: uppercase; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(10, 22, 40, 0.06);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--axia-terracotta-700); }