/**
 * tokens.css — Design Tokens (CSS Custom Properties)
 * MAPX Landing · khoahoc.giauco.vn
 *
 * AESTHETIC: Slate + Red Urgency — long-form sales, conversion-focused
 * Reference: event.giauco.vn/video-marketing
 *
 * TYPOGRAPHY:
 *   - Single font: Inter (Google Fonts) — weights 400-900
 *   - Body 17px / line-height 1.6 (VN readability)
 *   - Display tracking -0.025em compensation
 *
 * LAYOUT:
 *   - Full-bleed pattern: section 100% width, inner container 1140 (default) / 1280 (wide) / 720 (narrow)
 */

:root {
  /* ─── Backgrounds ────────────────────────────────────────── */
  --bg-body:        #ffffff;          /* primary white */
  --bg-gray:        #f8fafc;          /* alternate section nhẹ */
  --bg-cream:       #fff8f2;          /* PS letter, eyebrow chip warm */
  --bg-red-soft:    #fef2f2;          /* scarcity bar bg, eyebrow đỏ */
  --bg-yellow-soft: #fef9c3;          /* highlight pen bg */
  --bg-dark:        #0f172a;          /* slate-900 — closing cards, dark sections */
  --bg-dark-alt:    #1e293b;          /* slate-800 — dark card BG */

  /* ─── Red urgency (CTA + accent) ─────────────────────────── */
  --red-primary:    #dc2626;          /* CTA, urgency, highlight */
  --red-hover:      #b91c1c;          /* hover state */
  --red-deep:       #991b1b;          /* CTA border-bottom 3D depth */
  --red-bright:     #ef4444;          /* highlight on dark BG */
  --red-glow:       rgba(220, 38, 38, 0.32);
  --red-glow-soft:  rgba(220, 38, 38, 0.18);

  /* ─── Other accents ──────────────────────────────────────── */
  --accent-gold:    #f59e0b;          /* bonus / quà tặng highlight */
  --accent-blue:    #2563eb;          /* trust / chuyên gia eyebrow */
  --accent-yellow-hl: #fef08a;        /* highlight-pen text bg */

  /* ─── Text (slate scale) ─────────────────────────────────── */
  --text-dark:      #020617;          /* slate-950 — H1, H2 */
  --text-main:      #1e293b;          /* slate-800 — body default */
  --text-body:      #334155;          /* slate-700 — body relaxed */
  --text-light:     #64748b;          /* slate-500 — secondary, captions */
  --text-muted:     #94a3b8;          /* slate-400 — tertiary, footer */
  --text-on-dark:   #ffffff;
  --text-on-dark-soft: rgba(255,255,255,0.78);
  --text-on-dark-mute: rgba(255,255,255,0.55);
  --text-on-red:    #ffffff;
  --text-red:       var(--red-primary);

  /* ─── Borders ────────────────────────────────────────────── */
  --border-soft:    #e2e8f0;          /* slate-200 */
  --border-medium:  #cbd5e1;          /* slate-300 */
  --border-strong:  #94a3b8;          /* slate-400 */
  --border-red:     2px solid var(--red-primary);
  --border-divider: 1px solid var(--border-soft);

  /* ─── Typography — Inter single font ─────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);

  /* ─── Type Scale — base 17px (VN readability) ────────────── */
  --text-2xs:   0.75rem;     /* 12px — micro labels */
  --text-xs:    0.8125rem;   /* 13px — eyebrow, badge */
  --text-sm:    0.9375rem;   /* 15px — caption, list items */
  --text-base:  1.0625rem;   /* 17px — body */
  --text-lg:    1.1875rem;   /* 19px — lead paragraph */
  --text-xl:    1.375rem;    /* 22px — h5 / small heading */
  --text-2xl:   1.625rem;    /* 26px — h4 / card title */
  --text-3xl:   1.875rem;    /* 30px — h3 sub-section */
  --text-4xl:   2.25rem;     /* 36px — h2 floor (mobile) */
  --text-5xl:   2.875rem;    /* 46px — h2 ceiling (desktop) */
  --text-6xl:   3.25rem;     /* 52px — h1 hero (per reference) */
  --text-7xl:   4rem;        /* 64px — display price */
  --text-8xl:   5rem;        /* 80px — mega display */

  /* ─── Line heights ───────────────────────────────────────── */
  --leading-display:  1.05;
  --leading-heading:  1.18;
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.55;
  --leading-relaxed:  1.6;            /* body — per reference */
  --leading-loose:    1.85;

  /* ─── Letter-spacing ─────────────────────────────────────── */
  --tracking-tightest: -0.035em;
  --tracking-tighter:  -0.025em;      /* h1 */
  --tracking-tight:    -0.015em;      /* h2/h3 */
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;       /* eyebrow uppercase */

  /* ─── Font weights ───────────────────────────────────────── */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;              /* h2, CTA */
  --font-black:     900;              /* h1, display */

  /* ─── Spacing scale (8px base) ───────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Section rhythm ─────────────────────────────────────── */
  --section-pad-y-mobile:  var(--space-14);   /* 56px */
  --section-pad-y-desktop: var(--space-16);   /* 64px — per reference */
  --gap-eyebrow-h2:        var(--space-3);
  --gap-h2-divider:        var(--space-5);
  --gap-divider-sub:       var(--space-5);
  --gap-sub-content:       var(--space-10);

  /* ─── Border radius ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;                 /* CTA — per reference */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Layout — Full-bleed pattern ────────────────────────── */
  --container-default: 1140px;        /* text sections */
  --container-wide:    1280px;        /* hero, grids: 8 lợi ích, 11 quyền lợi, stack bars, plans */
  --container-narrow:  720px;         /* PS letter focused */
  --container-prose:   640px;         /* body paragraphs readability */

  /* Legacy aliases (back-compat) */
  --max-width:        var(--container-default);
  --max-width-wide:   var(--container-wide);
  --max-width-narrow: var(--container-narrow);
  --max-width-prose:  var(--container-prose);

  /* ─── Z-index layers ─────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;
  --z-top:     500;

  /* ─── Transitions ────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:  0 12px 28px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --shadow-strong: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-red: 0 10px 20px var(--red-glow);
  --shadow-red-strong: 0 12px 32px rgba(220,38,38,0.5);
}