/* ============================================================
   RP DESIGN — DESIGN TOKENS
   Base da identidade metálica (platina / grafite sobre preto)
   ============================================================ */
:root {
  /* ----- Brand palette ----- */
  --rp-black:         #000000;
  --rp-black-2:       #0A0A0A;
  --rp-white:         #FFFFFF;
  --rp-white-2:       #F8F8F8;
  --rp-gray-ui:       #1A1A1A;
  --rp-gray-border:   #E0E0E0;

  /* Silver / graphite scale (extraída do brandbook) */
  --silver-100:       #F0F0F0;
  --silver-300:       #D8D8D8;
  --silver-500:       #B0B0B0;
  --silver-700:       #686868;
  --graphite-300:     #8A8A8A;
  --graphite-500:     #5A5A5A;
  --graphite-700:     #4A4A4A;
  --graphite-900:     #222222;

  /* ----- Dark-mode surfaces (camadas layered — DS4) ----- */
  --surface-0:        #0A0A0A;     /* page background */
  --surface-1:        #0F0F0F;     /* section alt */
  --surface-2:        #141414;     /* card */
  --surface-3:        #1A1A1A;     /* elevated / input */

  /* ----- Borders / lines ----- */
  --line-1:           rgba(255, 255, 255, 0.06);
  --line-2:           rgba(255, 255, 255, 0.10);
  --line-3:           rgba(255, 255, 255, 0.18);

  /* ----- Text hierarchy ----- */
  --text-1:           #FFFFFF;
  --text-2:           #B8B8B8;
  --text-3:           #7A7A7A;
  --text-4:           #4A4A4A;

  /* ----- Brand gradients ----- */
  --grad-platinum:    linear-gradient(135deg, #F0F0F0 0%, #B0B0B0 35%, #D8D8D8 60%, #686868 100%);
  --grad-graphite:    linear-gradient(135deg, #4A4A4A 0%, #8A8A8A 35%, #5A5A5A 60%, #222222 100%);
  --grad-shine:       linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  --grad-fade-b:      linear-gradient(180deg, #FFFFFF 0%, #9A9A9A 100%);

  /* ----- Typography ----- */
  --font-display:     "Alexandria", ui-sans-serif, system-ui, sans-serif;
  --font-body:        "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale modular (step 1.25) */
  --fs-xs:            0.75rem;       /* 12 */
  --fs-sm:            0.875rem;      /* 14 */
  --fs-base:          1rem;          /* 16 */
  --fs-lg:            1.125rem;      /* 18 */
  --fs-xl:            1.25rem;       /* 20 */
  --fs-2xl:           1.5rem;        /* 24 */
  --fs-3xl:           2rem;          /* 32 */
  --fs-4xl:           2.75rem;       /* 44 */
  --fs-5xl:           3.5rem;        /* 56 */
  --fs-6xl:           clamp(3.5rem, 8vw, 6.5rem);

  /* Font weights (alinhados ao brandbook) */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* Line-heights */
  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-base:          1.5;
  --lh-loose:         1.75;

  /* Letter-spacing */
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide:    0.1em;
  --tracking-widest:  0.25em;

  /* ----- Spacing (4/8pt scale) ----- */
  --space-1:          0.25rem;       /* 4  */
  --space-2:          0.5rem;        /* 8  */
  --space-3:          0.75rem;       /* 12 */
  --space-4:          1rem;          /* 16 */
  --space-5:          1.25rem;       /* 20 */
  --space-6:          1.5rem;        /* 24 */
  --space-8:          2rem;          /* 32 */
  --space-10:         2.5rem;        /* 40 */
  --space-12:         3rem;          /* 48 */
  --space-16:         4rem;          /* 64 */
  --space-20:         5rem;          /* 80 */
  --space-24:         6rem;          /* 96 */
  --space-32:         8rem;          /* 128 */

  /* ----- Layout ----- */
  --container:        1280px;
  --gutter:           clamp(1rem, 4vw, 2rem);
  --section-y:        clamp(4rem, 10vw, 8rem);

  /*
   * Breakpoints (de referência — CSS vars não funcionam em @media):
   *   sm:  480px
   *   md:  768px
   *   lg:  1024px
   *   xl:  1280px
   *   2xl: 1440px
   */

  /* ----- Radius (cantos retos — influência DS3) ----- */
  --radius-0:         0;
  --radius-1:         2px;
  --radius-pill:      9999px;

  /* ----- Transitions ----- */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);       /* DS3 */
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-brand:       cubic-bezier(0.25, 0.46, 0.45, 0.94);/* brandbook */
  --dur-fast:         200ms;
  --dur-base:         400ms;
  --dur-slow:         700ms;
  --dur-xslow:        1200ms;

  /* ----- Shadows / glows ----- */
  --shadow-card:      0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-glow-platinum: 0 0 40px rgba(216, 216, 216, 0.12);
  --shadow-glow-soft: 0 0 32px rgba(255, 255, 255, 0.06);

  /* ----- Z-index scale ----- */
  --z-noise:          9000;
  --z-header:         100;
  --z-modal:          1000;
}