/* ============================================================
   Angel Media — Colors & Type
   "Elegante. Creativa. Con propósito."
   ============================================================ */

/* ---- Web fonts ---------------------------------------------
   Satoshi          → SELF-HOSTED from /fonts (woff2, 400/500/700/900).
   Cormorant Garamond → official display serif, loaded from Google Fonts.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
@font-face{
  font-family:"Satoshi";
  src:url("fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("fonts/Satoshi-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}

:root {
  /* =========================================================
     COLOR — Brand palette
     ========================================================= */
  --am-coral:        #FF6F61;   /* CORAL — warmth, energy, latina */
  --am-rosa:         #FF5ABA;   /* ROSA  — creativity, vibrance   */
  --am-rosa-claro:   #FFD6D0;   /* ROSA CLARO — soft, breathing   */
  --am-marfil:       #F7F4EF;   /* MARFIL — ivory canvas          */
  --am-negro:        #0D0D0D;   /* NEGRO — premium, editorial     */
  --am-white:        #FFFFFF;

  /* Soft tints for backgrounds, separators, hover states */
  --am-coral-08:     rgba(255, 111,  97, 0.08);
  --am-coral-16:     rgba(255, 111,  97, 0.16);
  --am-rosa-08:      rgba(255,  90, 186, 0.08);
  --am-rosa-16:      rgba(255,  90, 186, 0.16);
  --am-negro-08:     rgba(13, 13, 13, 0.08);
  --am-negro-40:     rgba(13, 13, 13, 0.40);
  --am-negro-64:     rgba(13, 13, 13, 0.64);

  /* Marfil family — three steps for layering on light surfaces */
  --am-marfil-bg:    #F7F4EF;
  --am-marfil-soft:  #FBF9F5;
  --am-marfil-deep:  #EDE8E0;

  /* =========================================================
     COLOR — Semantic
     ========================================================= */
  --am-bg:           var(--am-marfil);     /* default page bg */
  --am-bg-soft:      var(--am-marfil-soft);
  --am-bg-deep:      var(--am-marfil-deep);
  --am-bg-dark:      var(--am-negro);
  --am-surface:      #FFFFFF;
  --am-surface-dark: #1A1A1A;

  --am-fg:           var(--am-negro);      /* primary text */
  --am-fg-muted:     var(--am-negro-64);   /* secondary text */
  --am-fg-subtle:    var(--am-negro-40);   /* captions, hints */
  --am-fg-inverse:   var(--am-marfil);

  --am-accent:       var(--am-rosa);       /* primary brand accent */
  --am-accent-warm:  var(--am-coral);

  --am-border:       rgba(13, 13, 13, 0.10);
  --am-border-soft:  rgba(13, 13, 13, 0.06);
  --am-border-coral: rgba(255, 90, 186, 0.35);

  /* =========================================================
     GRADIENT — Coral → Rosa
     The single signature gradient. Use for CTAs, hero panels,
     bands, key-moment fills. Always 135deg.
     ========================================================= */
  --am-gradient:        linear-gradient(135deg, #FF6F61 0%, #FF5ABA 100%);   /* @kind color */
  --am-gradient-soft:   linear-gradient(135deg, #FFB8A8 0%, #FFAEDC 100%);   /* @kind color */
  --am-gradient-radial: radial-gradient(120% 80% at 0% 0%, #FF6F61 0%, #FF5ABA 70%);   /* @kind color */
  --am-gradient-horiz:  linear-gradient(90deg,  #FF6F61 0%, #FF5ABA 100%);   /* @kind color */

  /* =========================================================
     TYPE — Families
     ========================================================= */
  --am-font-display: "Cormorant Garamond", "Playfair Display",
                     ui-serif, Georgia, serif;
  --am-font-sans:    "Satoshi", "Inter", system-ui, -apple-system,
                     "Segoe UI", Helvetica, Arial, sans-serif;
  --am-font-mono:    ui-monospace, Menlo, Consolas, "SF Mono", monospace;

  /* TYPE — Size scale (8-pt-ish musical) */
  --am-text-xs:   12px;
  --am-text-sm:   14px;
  --am-text-base: 16px;
  --am-text-md:   18px;
  --am-text-lg:   22px;
  --am-text-xl:   28px;
  --am-text-2xl:  36px;
  --am-text-3xl:  48px;
  --am-text-4xl:  64px;
  --am-text-5xl:  88px;
  --am-text-6xl:  120px;

  /* TYPE — Weight tokens (Satoshi) */
  --am-w-regular:  400;   /* @kind font */
  --am-w-medium:   500;   /* @kind font */
  --am-w-bold:     700;   /* @kind font */
  --am-w-black:    900;   /* @kind font */

  /* TYPE — Tracking */
  --am-track-tight:  -0.02em;   /* @kind font */
  --am-track-normal:  0;        /* @kind font */
  --am-track-wide:    0.08em;   /* @kind font */
  --am-track-wider:   0.16em;   /* @kind font */
  --am-track-widest:  0.24em;   /* @kind font */

  /* TYPE — Leading */
  --am-lead-tight:  1.05;   /* @kind font */
  --am-lead-snug:   1.18;   /* @kind font */
  --am-lead-normal: 1.5;    /* @kind font */
  --am-lead-relax:  1.65;   /* @kind font */

  /* =========================================================
     SPACING — 4-pt scale
     ========================================================= */
  --am-space-1:   4px;
  --am-space-2:   8px;
  --am-space-3:   12px;
  --am-space-4:   16px;
  --am-space-5:   24px;
  --am-space-6:   32px;
  --am-space-7:   48px;
  --am-space-8:   64px;
  --am-space-9:   96px;
  --am-space-10:  128px;

  /* =========================================================
     RADII — Soft, rounded geometry
     ========================================================= */
  --am-radius-xs:   4px;
  --am-radius-sm:   8px;
  --am-radius-md:   14px;   /* default card */
  --am-radius-lg:   20px;   /* large card */
  --am-radius-xl:   28px;   /* hero panel */
  --am-radius-pill: 999px;

  /* =========================================================
     SHADOWS — Subtle, never aggressive
     Always use coral-tinted ambient over pure black.
     ========================================================= */
  --am-shadow-sm: 0 1px 2px rgba(13,13,13,0.06),
                  0 1px 3px rgba(13,13,13,0.04);
  --am-shadow-md: 0 4px 12px rgba(13,13,13,0.06),
                  0 2px 4px rgba(13,13,13,0.04);
  --am-shadow-lg: 0 16px 40px rgba(13,13,13,0.10),
                  0 4px 12px rgba(13,13,13,0.06);
  --am-shadow-coral: 0 12px 32px rgba(255, 90, 186, 0.28),
                     0 4px 12px rgba(255, 111, 97, 0.18);

  /* =========================================================
     STROKES — Iconography is monoline; keep weights consistent
     ========================================================= */
  --am-stroke-hair: 1px;
  --am-stroke:      1.5px;   /* default icon stroke */
  --am-stroke-bold: 2px;

  /* =========================================================
     MOTION
     ========================================================= */
  --am-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --am-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --am-dur-fast:    140ms;   /* @kind other */
  --am-dur:         240ms;   /* @kind other */
  --am-dur-slow:    420ms;   /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */
.am-eyebrow {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-medium);
  font-size: var(--am-text-xs);
  letter-spacing: var(--am-track-wider);
  text-transform: uppercase;
  color: var(--am-accent);
}

.am-h1, h1.am {
  font-family: var(--am-font-display);
  font-weight: 500;            /* Cormorant feels best at medium */
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--am-lead-tight);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
}

.am-h2, h2.am {
  font-family: var(--am-font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: var(--am-lead-snug);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
}

.am-h3, h3.am {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-bold);
  font-size: var(--am-text-xl);
  line-height: var(--am-lead-snug);
  letter-spacing: var(--am-track-tight);
  color: var(--am-fg);
}

.am-h4, h4.am {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-medium);
  font-size: var(--am-text-lg);
  line-height: var(--am-lead-snug);
  color: var(--am-fg);
}

.am-body, p.am {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-regular);
  font-size: var(--am-text-base);
  line-height: var(--am-lead-relax);
  color: var(--am-fg);
}

.am-lead {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-regular);
  font-size: var(--am-text-md);
  line-height: var(--am-lead-relax);
  color: var(--am-fg-muted);
}

.am-caption {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-medium);
  font-size: var(--am-text-sm);
  line-height: var(--am-lead-normal);
  color: var(--am-fg-muted);
}

.am-micro {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-medium);
  font-size: var(--am-text-xs);
  letter-spacing: var(--am-track-wide);
  color: var(--am-fg-subtle);
}

.am-cta {
  font-family: var(--am-font-sans);
  font-weight: var(--am-w-bold);
  font-size: var(--am-text-sm);
  letter-spacing: var(--am-track-widest);
  text-transform: uppercase;
  color: var(--am-fg);
}

/* Gradient text — for one-word accents inside headlines */
.am-gradient-text {
  background: var(--am-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Italic accent — Cormorant italic for "creativa.", names, etc */
.am-italic-accent {
  font-family: var(--am-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--am-accent);
}