/* ============================================================
   DRONES GDL — Design Tokens (CSS Custom Properties)
   v1.0 · Para landing page y materiales digitales
   ============================================================ */
:root{
  /* ---------- COLOR · PRIMARIOS ---------- */
  --color-jet:           #080A0F;   /* Fondo base               */
  --color-carbon:        #111317;   /* Fondo elevado / cards    */
  --color-carbon-2:      #161A20;   /* Surface alt              */

  /* ---------- COLOR · NEUTROS ---------- */
  --color-gray:          #9EA7B3;   /* Texto secundario         */
  --color-gray-soft:     #5C6470;   /* Texto muy secundario     */
  --color-soft-white:    #F3F6FA;   /* Texto principal          */
  --color-line:          rgba(255,255,255,0.08);
  --color-line-strong:   rgba(255,255,255,0.14);

  /* ---------- COLOR · ACENTOS ---------- */
  --color-cyan:          #68C2FF;   /* Acento principal · CTAs  */
  --color-mint:          #83E9DA;   /* Acento secundario        */
  --color-cyan-deep:     #04141F;   /* Texto sobre cian/menta   */

  /* ---------- COLOR · ESTADO ---------- */
  --color-success:       #83E9DA;
  --color-danger:        #FF8B8B;
  --color-warning:       #E9C77B;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display:        'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body:           'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-display:          clamp(48px, 8vw, 96px);
  --fs-h1:               clamp(36px, 5vw, 56px);
  --fs-h2:               clamp(26px, 3.2vw, 34px);
  --fs-h3:               20px;
  --fs-body:             16px;
  --fs-small:            14px;
  --fs-mono:             12px;

  --lh-tight:            0.92;
  --lh-snug:             1.15;
  --lh-body:             1.55;

  --ls-display:          -0.025em;
  --ls-cta:              0.24em;
  --ls-mono:             0.12em;

  /* ---------- ESPACIADO · BASELINE 8 ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADIOS ---------- */
  --radius-xs:           6px;
  --radius-sm:           10px;
  --radius-md:           14px;
  --radius-lg:           18px;
  --radius-xl:           24px;
  --radius-pill:         999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.25);
  --shadow-md: 0 12px 30px -10px rgba(0,0,0,.45);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.65);
  --shadow-glow-cyan: 0 0 32px rgba(104,194,255,.35);

  /* ---------- TRANSICIONES ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad: clamp(24px, 5vw, 80px);
  --grid-cols:     12;
  --grid-gutter:   16px;
}

/* ============================================================
   PRESETS DE TIPOGRAFÍA UTILITARIOS
   ============================================================ */
.t-display  { font-family:var(--font-display); font-weight:700; font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--ls-display); }
.t-h1       { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h1); line-height:1; letter-spacing:-0.02em; }
.t-h2       { font-family:var(--font-display); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:-0.01em; }
.t-h3       { font-family:var(--font-display); font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-snug); }
.t-body     { font-family:var(--font-body);    font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body); }
.t-cta      { font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:var(--ls-cta); text-transform:uppercase; }
.t-mono     { font-family:var(--font-mono);    font-weight:500; font-size:var(--fs-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; }

/* ============================================================
   BASE
   ============================================================ */
html,body{ background:var(--color-jet); color:var(--color-soft-white); font-family:var(--font-body); }