/* ============================================================
   Arigato Studio — Colors & Type (Sistema unificado)
   ============================================================
   "Estudio" direction. Agencia digital con craft editorial.

   Paleta heredada del manual original (navy + coral + cyan + blanco),
   tipografía y componentes modernizados para 2026+.
   Logo (planet + ring) mantenido — ver /assets.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     CORE PALETTE
     Cuatro colores corporativos del manual — ahora con profundidad.
     Canvas · Navy · Coral · Cyan (spark)
     ============================================================ */
  --navy-deep:      #202739;  /* primary dark surface */
  --navy:           #384259;  /* brand navy del manual */
  --navy-soft:      #4A5676;  /* secondary fg sobre canvas */
  --coral:          #E13F5B;  /* accent principal */
  --coral-deep:     #B72D44;
  --spark:          #82FFFA;  /* cyan del manual — reservado para delight */

  --canvas:         #FAFAF9;
  --paper:          #FFFFFF;
  --sunken:         #F1F2F6;
  --line:           #E1E4EC;
  --line-strong:    #C2C8D6;
  --mute-100:       #C2C8D6;
  --mute-200:       #97A0B8;
  --mute-300:       #6B7796;
  --mute-400:       #4A5676;

  --coral-50:       #FDEEF1;
  --coral-100:      #FAD5DC;
  --coral-200:      #F2A5B3;
  --coral-300:      #EB7689;
  --coral-400:      #E55A72;
  --coral-500:      #E13F5B;
  --coral-600:      #C72F4A;
  --coral-700:      #9A2439;

  --navy-50:        #F8F9FC;
  --navy-100:       #F2F4F8;
  --navy-200:       #E1E4EC;
  --navy-300:       #C2C8D6;
  --navy-400:       #97A0B8;
  --navy-500:       #6B7796;
  --navy-600:       #4A5676;
  --navy-700:       #384259;
  --navy-800:       #2A324A;
  --navy-900:       #202739;
  --navy-950:       #151B2B;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --bg:             var(--canvas);
  --bg-raised:      var(--paper);
  --bg-sunken:      var(--sunken);
  --bg-inverse:     var(--navy-900);

  --fg1:            var(--navy-900);
  --fg2:            var(--navy-600);
  --fg3:            var(--navy-400);
  --fg-inverse:     var(--paper);
  --fg-accent:      var(--coral);
  --fg-link:        var(--navy-900);
  --fg-link-hover:  var(--coral);

  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --border-focus:   var(--coral);

  --success:        #2F7D5B;
  --warning:        #B97A1F;
  --danger:         var(--coral);
  --info:           var(--navy);

  /* ============================================================
     TYPE — General Sans para todo, Fraunces solo editorial
     ============================================================ */
  --font-logo:      'Michroma', 'Eurostile', 'Impact', sans-serif;
  --font-sans:      'General Sans', 'Inter Tight', system-ui, sans-serif;
  --font-display:   'General Sans', 'Inter Tight', system-ui, sans-serif;
  --font-serif:     'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.0625rem;
  --text-lg:        1.25rem;
  --text-xl:        1.5rem;
  --text-2xl:       2rem;
  --text-3xl:       2.625rem;
  --text-4xl:       3.5rem;
  --text-5xl:       4.5rem;
  --text-6xl:       6rem;
  --text-display:   8rem;

  --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;

  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 1px rgba(14,16,20,0.04);
  --shadow-sm:  0 1px 2px rgba(14,16,20,0.06), 0 1px 1px rgba(14,16,20,0.03);
  --shadow-md:  0 4px 12px rgba(14,16,20,0.06), 0 2px 4px rgba(14,16,20,0.04);
  --shadow-lg:  0 12px 28px rgba(14,16,20,0.08), 0 4px 8px rgba(14,16,20,0.05);
  --shadow-xl:  0 28px 60px rgba(14,16,20,0.14), 0 8px 16px rgba(14,16,20,0.06);
  --shadow-focus: 0 0 0 3px rgba(225,63,91,0.22);

  --ease-out:       cubic-bezier(0.2, 0.7, 0.1, 1.0);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       140ms;
  --dur-base:       220ms;
  --dur-slow:       380ms;
}

.as-display, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: -0.035em;
  font-size: var(--text-5xl);
  line-height: 0.96;
  color: var(--fg1);
  text-wrap: balance;
}

.as-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.028em;
  font-size: var(--text-3xl);
  line-height: 1.04;
  color: var(--fg1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.as-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.022em;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--fg1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.as-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--fg1);
  margin: 0 0 var(--space-3);
}

.as-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--fg1);
  margin: 0 0 var(--space-3);
}

.as-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  color: var(--fg2);
}

.as-lede, .lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg2);
  max-width: 62ch;
  text-wrap: pretty;
}

.as-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg1);
  max-width: 68ch;
  text-wrap: pretty;
}

.as-caption, small {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg3);
}

.as-meta {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--fg2);
}

.as-serif-quote {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--fg1);
  letter-spacing: -0.01em;
}

.as-code, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--fg1);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  text-decoration-color: currentColor;
}

[data-surface="navy"], .on-navy, [data-surface="ink"], .on-ink {
  --bg:             var(--navy-900);
  --bg-raised:      var(--navy-800);
  --bg-sunken:      var(--navy-950);
  --fg1:            #FFFFFF;
  --fg2:            var(--navy-300);
  --fg3:            var(--navy-400);
  --fg-accent:      var(--coral);
  --fg-link:        #FFFFFF;
  --fg-link-hover:  var(--coral);
  --border:         var(--navy-700);
  --border-strong:  var(--navy-600);
  background: var(--bg);
  color: var(--fg1);
}