/* ==========================================================================
   iPhone Venezuela — DESIGN TOKENS
   Source of truth for the design system in PROJECT-MASTER.md section 7.
   Concept: "el Bloomberg de los precios de iPhone en Venezuela" — a live data
   product, not a blog. Apple-adjacent minimalism. Prices ARE the identity.

   Palette rule: near-black + white + ONE accent (electric blue). WhatsApp green
   is isolated to --wa and used ONLY on the money button (section 6), so its
   recognition is never diluted. Do not use --wa anywhere else.
   ========================================================================== */

:root {
  /* --- Ink & paper --- */
  --c-ink:        #1D1D1F;              /* near-black, primary text + dark surfaces */
  --c-ink-soft:   #424245;/* body copy */
  --c-ink-mute:   #6E6E73;/* secondary / captions */
  --c-ink-faint:  #86868B;/* tasa BCV note, disabled */
  --c-paper:      #FFFFFF;              /* page background */
  --c-surface:    #F5F5F7;              /* cards, table zebra */
  --c-surface-2:  #EDEDF0;             /* table header on light */
  --c-line:       rgba(10, 10, 11, .08);/* hairlines, borders */
  --c-line-strong:rgba(10, 10, 11, .16);

  /* --- Accent (electric blue). --c-link is the AA-safe text tone. --- */
  --c-accent:     #0071E3;             /* fills, large elements, data highlights */
  --c-link:       #0066CC;             /* link text on white (>= 4.5:1) */
  --c-accent-wash:#F0F7FF;             /* faint accent background */

  /* --- WhatsApp green — CTA ONLY. Never reuse. --- */
  --wa:           #1FA45C;
  --wa-ink:       #0E8C5A;             /* text/hover tone that passes AA on white */

  /* --- Semantic (price deltas, availability). Buyer perspective:
         price DOWN is good (green), price UP is bad (red). --- */
  --up:           #DC2626;             /* precio subió */
  --down:         #16A34A;             /* precio bajó */
  --flat:         var(--c-ink-mute);
  --ok:           #16A34A;             /* disponible */
  --warn:         #B45309;             /* consultar (AA on white) */
  --gone:         var(--c-ink-mute);   /* agotado */

  /* --- Type --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --w-reg:  400;
  --w-bold: 700;                        /* headings + prices. Two weights only. */
  --nums: tabular-nums;                 /* apply via font-variant-numeric */

  /* Type scale — mobile-first, fluid. Designed at 360px. */
  --fs-eyebrow:   .75rem;               /* 12px, uppercase label */
  --fs-body:      1rem;                 /* 16px */
  --fs-small:     .8125rem;             /* 13px, notes */
  --fs-lead:      clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-h3:        1.25rem;
  --fs-h2:        clamp(1.5rem, 3vw, 2rem);
  --fs-h1:        clamp(1.75rem, 5vw, 2.75rem);
  --fs-price:     clamp(1.75rem, 6vw, 2.5rem);   /* hero numerals */
  --fs-price-cell:1.0625rem;            /* 17px, price inside tables */

  --lh-tight: 1.1;
  --lh-body:  1.6;

  /* --- Space scale (rem) --- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;

  /* --- Radius --- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-pill: 999px;

  /* --- Elevation (subtle only, section 7 forbids heavy motion/shadow) --- */
  --shadow-card: 0 1px 2px rgba(10,10,11,.04), 0 8px 24px rgba(10,10,11,.05);

  /* --- Layout --- */
  --measure: 42rem;   /* ~672px text column */
  --wide:    72rem;   /* full-width tables/hero */

  /* --- Motion --- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur:  .18s;
}

/* Respect users who ask for less motion (accessible-by-default). */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Global numeral behavior: every price and table figure aligns in columns. */
:root { font-feature-settings: "cv11"; }
table, .num, .price, .delta { font-variant-numeric: var(--nums); }

/* --------------------------------------------------------------------------
   Dark surface utility. Section 7 = light base with a dark hero and dark
   table headers, NOT full dark mode. Wrap a hero/section in .surface-ink to
   flip the relevant tokens locally.
   -------------------------------------------------------------------------- */
.surface-ink {
  background: #000000;                 /* pure black, Apple dark section */
  color: #FFFFFF;
  --c-ink:       #FFFFFF;              /* headings/body that read this now paint light, not black-on-black */
  --c-ink-soft:  rgba(255,255,255,.76);
  --c-ink-mute:  rgba(255,255,255,.58);
  --c-line:      rgba(255,255,255,.12);
  --c-surface:   rgba(255,255,255,.06);
  --c-link:      #2997FF;   /* Apple dark-mode blue */
}