@charset "UTF-8";
/* King's Kids 2027 — Design Tokens
   Fontes: Archivo Black (display), Archivo (texto/expanded p/ rótulos) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Archivo+Black&display=swap');

:root {
  /* Marca */
  --kk-indigo-50:  #EEECFC;
  --kk-indigo-100: #D9D5F7;
  --kk-indigo-200: #B3AAEF;
  --kk-indigo-300: #8C80E5;
  --kk-indigo-400: #6656DB;
  --kk-indigo-500: #4230CC; /* cor principal (da arte) */
  --kk-indigo-600: #3625A8;
  --kk-indigo-700: #2A1D85;
  --kk-indigo-800: #1E1563;
  --kk-indigo-900: #130D42;

  --kk-yellow-50:  #FFF9D6;
  --kk-yellow-200: #FEEB87;
  --kk-yellow-500: #FDD825; /* destaque (da arte) */
  --kk-yellow-600: #E3BC00;
  --kk-yellow-700: #A88A00;

  --kk-white: #FFFFFF;
  --kk-ink:   #0F0B2E;

  /* Semânticas */
  --color-bg:            var(--kk-white);
  --color-bg-brand:      var(--kk-indigo-500);
  --color-bg-deep:       var(--kk-indigo-900);
  --color-bg-soft:       var(--kk-indigo-50);
  --color-text:          var(--kk-ink);
  --color-text-muted:    #54507A;
  --color-text-on-brand: var(--kk-white);
  --color-accent:        var(--kk-yellow-500);
  --color-border:        var(--kk-indigo-100);
  --color-focus:         var(--kk-yellow-500);

  --color-success: #17A36B;
  --color-warning: #F59E0B;
  --color-danger:  #E5484D;
  --color-info:    #2F7BF5;

  /* Tipografia */
  --font-display: 'Archivo Black', 'Archivo', Impact, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.625rem;
  --text-2xl:  clamp(2rem, 4vw, 2.75rem);
  --text-3xl:  clamp(2.75rem, 7vw, 5rem);
  --text-4xl:  clamp(3.5rem, 12vw, 9rem);

  --leading-tight: .92;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-wide: .28em; /* "SAVE THE DATE" */

  /* Espaço (base 4px) */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --space-9: 6rem;   --space-10: 8rem;

  /* Forma */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;

  /* Elevação */
  --shadow-sm: 0 1px 2px rgba(19,13,66,.12);
  --shadow-md: 0 8px 24px rgba(19,13,66,.16);
  --shadow-lg: 0 24px 60px rgba(19,13,66,.28);
  --shadow-yellow: 0 6px 0 var(--kk-yellow-600);

  /* Layout / movimento */
  --container: 1160px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 150ms; --dur: 280ms;
}