/* ==========================================================================
   Instacommerce — Foundations
   Derived from "Manual de marca y aplicaciones v1.1"
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Coolvetica (logo + display) — brand primary typeface */
@import url('https://fonts.cdnfonts.com/css/coolvetica');
/* Raleway (body) — brand secondary typeface */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* --- Brand primary colors --- */
  --ic-white:  #FFFFFF;   /* "Insta" wordmark */
  --ic-yellow: #FBBC0B;   /* gradient start  (PANTONE P 10-8 C)  */
  --ic-red:    #E42328;   /* gradient mid    (PANTONE P 52-8 C)  */
  --ic-blue:   #1B69A8;   /* gradient end    (PANTONE P 107-6 C) */

  /* --- Brand secondary --- */
  --ic-ink:    #1D1E1C;   /* dark gray/black — backgrounds + text on white */

  /* --- Signature gradient (used on "commerce" + accents) --- */
  --ic-gradient: linear-gradient(90deg, var(--ic-yellow) 0%, var(--ic-red) 50%, var(--ic-blue) 100%);

  /* --- Surfaces (tints/shades of ink, for depth on dark UI) --- */
  --ic-surface-0: #1D1E1C;
  --ic-surface-1: #232422;
  --ic-surface-2: #2B2C29;
  --ic-hairline:  rgba(255,255,255,0.10);

  /* --- Foreground on dark --- */
  --ic-fg-1: #FFFFFF;             /* primary text */
  --ic-fg-2: rgba(255,255,255,0.72); /* secondary text */
  --ic-fg-3: rgba(255,255,255,0.45); /* muted / captions */

  /* --- Type families --- */
  --ic-font-display: 'Coolvetica', 'Arial Narrow', system-ui, sans-serif;
  --ic-font-body:    'Raleway', system-ui, -apple-system, sans-serif;

  /* --- Type scale --- */
  --ic-h1: 700 clamp(2.4rem, 6vw, 4.5rem)/1.02 var(--ic-font-display);
  --ic-h2: 600 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--ic-font-display);
  --ic-lead: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.55 var(--ic-font-body);
  --ic-body: 400 1rem/1.6 var(--ic-font-body);
  --ic-eyebrow: 600 0.8rem/1 var(--ic-font-body);
  --ic-caption: 500 0.85rem/1.4 var(--ic-font-body);

  /* --- Radii --- */
  --ic-r-pill: 999px;
  --ic-r-card: 16px;
  --ic-r-sm: 10px;
}

/* Semantic helpers ---------------------------------------------------------- */
.ic-gradient-text {
  background: var(--ic-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}