/* =========================================================================
   Ageniqo Design System — Core Tokens
   Inspired by Together AI's visual language.

   Font substitutions (until licensed files are provided):
     "The Future"           →  Inter Tight  (Google Fonts)
     "PP Neue Montreal Mono"→  JetBrains Mono (Google Fonts)

   Signature serif is Fraunces (Google Fonts, weights 400-600). It carries
   the Ageniqo wordmark at 600 and four editorial display accents at
   400-500. It replaced Cormorant Garamond, whose hairlines fell below one
   pixel at nav and favicon size.
   Replace the @import below with @font-face rules pointing at /fonts/
   when licensed files become available.
   ========================================================================= */

/* Google Fonts are loaded via <link> in the consuming HTML file — removed
   the @import here because it serialised the CSS parse waterfall. */

:root {
  /* ---------------------------------------------------------------
     COLOR — Brand accents (illustration-only; never UI chrome)
     --------------------------------------------------------------- */
  --brand-magenta: #ef2cc1;
  --brand-orange:  #fc4c02;

  /* ---------------------------------------------------------------
     COLOR — Rose gold scale (UI accent family)
     Dots, hover underlines, small decorative marks.
     --------------------------------------------------------------- */
  --rose-gold-50:   #fdf1ec;  /* Champagne wash — tinted surface */
  --rose-gold-100:  #f4d9cc;  /* Pale blush */
  --rose-gold-300:  #e5b4a0;  /* Soft rose gold */
  --rose-gold-500:  #c08775;  /* Rose gold — core */
  --rose-gold-700:  #8e5c4d;  /* Deep copper */

  --gradient-rose-gold:
    linear-gradient(135deg, #fdf1ec 0%, #e5b4a0 45%, #c08775 100%);

  /* ---------------------------------------------------------------
     COLOR — Bronze scale (BRAND MARK)
     The Q mark. Flat values only — the retired five-stop gold gradient
     could not be reproduced in one ink, in embroidery, or at favicon size.
     --------------------------------------------------------------- */
  --bronze-500: #8E6A4A;  /* the mark on light surfaces */
  --bronze-700: #6B4F22;  /* deep bronze — pressed / high-contrast states */

  /* Warm tinted surface (paired with the bronze mark) */
  --champagne-50: #FDF6EC;

  /* ---------------------------------------------------------------
     COLOR — Core surfaces
     --------------------------------------------------------------- */
  --surface-light:    #ffffff;      /* primary canvas */
  --surface-dark:     #010120;      /* midnight blue — dark sections */
  --surface-glass-light: rgba(255, 255, 255, 0.12); /* glass on dark */
  --surface-glass-dark:  rgba(0, 0, 0, 0.08);      /* subtle tint on light */
  --surface-tint:     rgba(0, 0, 0, 0.04);         /* badges, subtle fills */

  /* ---------------------------------------------------------------
     COLOR — Text
     --------------------------------------------------------------- */
  --fg-on-light:        #000000;
  --fg-on-light-muted:  rgba(0, 0, 0, 0.60);
  --fg-on-light-subtle: rgba(0, 0, 0, 0.40);
  --fg-on-dark:         #ffffff;
  --fg-on-dark-muted:   rgba(255, 255, 255, 0.68);
  --fg-on-dark-subtle:  rgba(255, 255, 255, 0.45);

  /* ---------------------------------------------------------------
     COLOR — Accents that CAN appear in UI
     --------------------------------------------------------------- */
  --accent-lavender: #bdbbff;

  /* ---------------------------------------------------------------
     COLOR — Borders (hairline only)
     --------------------------------------------------------------- */
  --border-on-light: rgba(0, 0, 0, 0.08);
  --border-on-dark:  rgba(255, 255, 255, 0.12);

  /* ---------------------------------------------------------------
     COLOR — Signature pastel gradient (decorative only)
     --------------------------------------------------------------- */
  --gradient-pastel:
    linear-gradient(135deg, #ffd4ec 0%, #bdbbff 50%, #c9e4ff 100%);
  --gradient-hero-wash:
    radial-gradient(ellipse 80% 60% at 50% 20%,
      rgba(255, 212, 236, 0.55) 0%,
      rgba(189, 187, 255, 0.35) 40%,
      rgba(201, 228, 255, 0.20) 70%,
      rgba(255, 255, 255, 0) 100%);

  /* ---------------------------------------------------------------
     TYPOGRAPHY — Families
     --------------------------------------------------------------- */
  --font-display:   "The Future", "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono:      "PP Neue Montreal Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Georgia, monospace;
  --font-signature: "Fraunces", "Playfair Display", "Didot", Georgia, serif;

  /* ---------------------------------------------------------------
     TYPOGRAPHY — Display sizes (negative tracking scales with size)
     --------------------------------------------------------------- */
  --fs-display: 64px;   --lh-display: 1.05;  --ls-display: -1.92px;
  --fs-h1:      40px;   --lh-h1:      1.10;  --ls-h1:      -0.80px;
  --fs-h2:      28px;   --lh-h2:      1.15;  --ls-h2:      -0.42px;
  --fs-h3:      22px;   --lh-h3:      1.15;  --ls-h3:      -0.22px;
  --fs-body-lg: 18px;   --lh-body-lg: 1.30;  --ls-body-lg: -0.18px;
  --fs-body:    16px;   --lh-body:    1.30;  --ls-body:    -0.16px;
  --fs-caption: 14px;   --lh-caption: 1.40;  --ls-caption: -0.07px;

  /* ---------------------------------------------------------------
     TYPOGRAPHY — Mono labels (uppercase, positive tracking)
     --------------------------------------------------------------- */
  --fs-mono-lg:    16px; --ls-mono-lg:    0.08px;
  --fs-mono-sm:    11px; --ls-mono-sm:    0.055px;
  --fs-mono-micro: 10px; --ls-mono-micro: 0.05px;

  /* ---------------------------------------------------------------
     TYPOGRAPHY — Weights (only two in use)
     --------------------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium:  500;

  /* ---------------------------------------------------------------
     SPACING — 8px base, extended scale
     --------------------------------------------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-11:  44px;
  --space-12:  48px;
  --space-20:  80px;
  --space-24:  100px;
  --space-30:  120px;

  /* ---------------------------------------------------------------
     RADIUS — Restrained, two values only
     --------------------------------------------------------------- */
  --radius-sharp:       4px;
  --radius-comfortable: 8px;

  /* ---------------------------------------------------------------
     ELEVATION — Dark-blue-tinted shadows
     --------------------------------------------------------------- */
  --shadow-1: none;
  --shadow-2: rgba(1, 1, 32, 0.10) 0px 4px 10px;
  --shadow-3: rgba(1, 1, 32, 0.14) 0px 12px 32px;

  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro:     150ms;
  --dur-standard:  220ms;
  --dur-reveal:    400ms;

  /* ---------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------- */
  --container-max: 1200px;
}

/* =========================================================================
   Semantic element defaults — apply when colors_and_type.css is imported
   ========================================================================= */

html, body {
  background: var(--surface-light);
  color: var(--fg-on-light);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
  margin: 0;
}
h2, .h-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-medium);
  margin: 0;
}
h3, .h-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-medium);
  margin: 0;
}
h4, .h-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
  margin: 0;
}
p, .p-body {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin: 0;
}
.p-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}
.p-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

/* Mono labels — ALWAYS uppercase with positive tracking */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: var(--ls-mono-lg);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  line-height: 1;
}
.mono-label--sm {
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
}
.mono-label--micro {
  font-size: var(--fs-mono-micro);
  letter-spacing: var(--ls-mono-micro);
  font-weight: var(--fw-regular);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-sharp);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn--dark {
  background: var(--surface-dark);
  color: var(--fg-on-dark);
}
.btn--dark:hover   { background: #1a1a3a; }
.btn--dark:active  { background: #000010; transform: translateY(1px); }

.btn--outlined {
  background: transparent;
  color: var(--fg-on-light);
  border-color: var(--border-on-light);
}
.btn--outlined:hover  { background: rgba(0, 0, 0, 0.04); }
.btn--outlined:active { background: rgba(0, 0, 0, 0.08); transform: translateY(1px); }

.btn--glass {
  background: var(--surface-glass-light);
  color: var(--fg-on-dark);
  border-color: var(--border-on-dark);
  backdrop-filter: blur(6px);
}
.btn--glass:hover  { background: rgba(255, 255, 255, 0.18); }
.btn--glass:active { background: rgba(255, 255, 255, 0.22); transform: translateY(1px); }

/* ---------- Card ---------- */
.card {
  background: var(--surface-light);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-comfortable);
  padding: var(--space-6);
  transition: box-shadow var(--dur-standard) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-2); }
.card--dark {
  background: var(--surface-dark);
  border-color: var(--border-on-dark);
  color: var(--fg-on-dark);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--surface-tint);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-sharp);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: var(--ls-mono-lg);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-on-light);
}
.badge--dark {
  background: var(--surface-glass-light);
  border-color: var(--border-on-dark);
  color: var(--fg-on-dark);
}

/* ---------- Input ---------- */
.input {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  padding: 10px 12px;
  background: var(--surface-light);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-sharp);
  color: var(--fg-on-light);
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-standard);
}
.input:focus { border-color: var(--surface-dark); }

/* ---------- Utility: pastel hero wash ---------- */
.hero-wash {
  background:
    var(--gradient-hero-wash),
    var(--surface-light);
}