/* ==========================================================================
   KRYPTON — TOKENS
   Somente variaveis em :root. Nenhum seletor de estilo aqui.
   Todo valor de styles.css deve vir de uma variavel deste arquivo.
   ========================================================================== */

:root {

  /* --- COR: marca ------------------------------------------------------ */
  --c-lime: #BFFF00;
  --c-lime-hi: #D4FF3D;
  --c-lime-deep: #8FD400;
  --c-purple: #6A2BE2;
  --c-purple-hi: #7C41E8;
  --c-purple-deep: #4A1596;
  --c-purple-soft: #F6F1FF;
  --c-purple-line: #E4D9FB;
  --c-purple-ink: #4A3670;
  --c-purple-ink-soft: #D9C7FA;
  --c-green: #2E9E5B;
  --c-green-deep: #146E3C;

  /* --- COR: superficie claras ------------------------------------------ */
  --c-canvas: #FFFFFF;
  --c-canvas-alt: #FAFAF8;
  --c-surface: #F7F7F4;
  --c-surface-alt: #F4F4F1;
  --c-shell: #F1F1EE;
  --c-border: #E8E8E4;
  --c-border-strong: #E4E4E0;
  --c-border-soft: #F2F2EF;
  --c-border-hair: #EFEFEB;
  --c-border-dash: #C9C9C2;

  /* --- COR: superficies escuras --------------------------------------- */
  --c-night: #0E0E10;
  --c-night-alt: #0A0A0C;
  --c-night-2: #141418;
  --c-night-3: #1A1A1F;
  --c-night-4: #20202A;
  --c-night-line: #24242A;
  --c-night-line-soft: #1C1C22;
  --c-night-line-hi: #3A3A42;

  /* --- COR: texto ------------------------------------------------------ */
  --c-ink: #0E0E10;
  --c-ink-mid: #55555E;
  --c-ink-soft: #8E8E97;
  --c-ink-faint: #A8A8B0;
  --c-ink-ghost: #B4B4BB;
  --c-paper: #F7F7F5;
  --c-paper-mid: #C9C9D1;
  --c-paper-soft: #9A9AA3;
  --c-paper-faint: #7A7A83;
  --c-paper-ghost: #6E6E78;

  /* --- COR: estado ----------------------------------------------------- */
  --c-ok: #3F8F42;
  --c-ok-bg: #EAF6EA;
  --c-warn: #F2B01E;
  --c-warn-bg: #FFE9A8;
  --c-danger: #D8382B;
  --c-danger-bg: #FCEDEB;
  --c-focus: #6A2BE2;
  --c-disabled-bg: #EFEEE9;
  --c-disabled-ink: #B4B1AA;
  --c-soldout-ink: #8E8E97;
  --c-star: #F2B01E;
  --c-star-off: #D8D6CE;

  /* --- COR: overlays --------------------------------------------------- */
  --o-header: rgba(255, 255, 255, 0.93);
  --o-night-strong: rgba(10, 10, 12, 0.82);
  --o-night-mid: rgba(10, 10, 12, 0.62);
  --o-scrim: rgba(14, 14, 16, 0.52);
  --o-line-light: rgba(255, 255, 255, 0.32);
  /* selo por cima de foto: claro o bastante para o texto tinta ficar legível
     em qualquer foto, translúcido o bastante para não virar etiqueta colada. */
  --o-chip-light: rgba(255, 255, 255, 0.88);
  --o-fill-light: rgba(255, 255, 255, 0.06);
  --o-ring-soft: rgba(0, 0, 0, 0.12);
  --o-ring-hair: rgba(0, 0, 0, 0.06);

  /* --- COR: gradientes reaproveitados -------------------------------- */
  /* scrim ESCURO, igual nos dois mockups da home: o texto do hero é branco e
     precisa de peso embaixo (0.86) e um respiro no topo (0.5) pro menu. */
  --g-hero-scrim: linear-gradient(180deg, rgba(20,30,4,0.5) 0%, rgba(20,30,4,0.04) 22%, rgba(16,26,2,0.3) 54%, rgba(12,20,2,0.86) 100%);
  --g-card: linear-gradient(170deg, #F6F6F3, #EAEAE6);
  --g-card-promo: linear-gradient(170deg, #7C41E8, #5A1FC9);
  --g-gallery: linear-gradient(168deg, #F6F6F3, #E9E9E4);
  --g-b2b: linear-gradient(158deg, #7B34F0 0%, #4A1596 100%);
  --g-frame: linear-gradient(120deg, #BFFF00 0%, #8A2BE2 100%);
  --g-media-foot: linear-gradient(180deg, rgba(10,10,12,0.18) 0%, rgba(10,10,12,0) 38%, rgba(10,10,12,0.82) 100%);
  --g-thumb-foot: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,0.86) 100%);
  /* HOME: a foto do atacado agora tem coluna só dela, sem texto por cima — o
     scrim deixou de precisar tapar meio quadro e virou o véu leve do mockup,
     só pra assentar a foto no preto do painel ao lado. */
  --g-wholesale-scrim: linear-gradient(180deg, rgba(6,20,12,0.3) 0%, rgba(6,20,12,0) 42%, rgba(6,20,12,0.55) 100%);
  /* PÁGINA /atacado: ali o texto branco continua EM CIMA da foto, então o
     véu tem que ser pesado mesmo — é outro caso, não o mesmo token. */
  --g-green-hero-scrim: linear-gradient(180deg, rgba(20,110,60,0.95) 0%, rgba(21,111,61,0.86) 46%, rgba(23,113,63,0.6) 100%);
  --g-green-hero-scrim-wide: linear-gradient(272deg, rgba(20,110,60,0.92) 0%, rgba(21,111,61,0.84) 32%, rgba(23,113,63,0.42) 48%, rgba(24,114,64,0) 62%);
  --g-mark: linear-gradient(104deg, rgba(191,255,0,0) 0.6%, #BFFF00 2.4%, #BFFF00 96%, rgba(191,255,0,0) 99%);

  /* --- TIPOGRAFIA: familias ------------------------------------------- */
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- TIPOGRAFIA: tamanhos ------------------------------------------- */
  --fs-nano: 0.4375rem;   /*  7px — so em rotulo mono */
  --fs-micro: 0.5rem;     /*  8px */
  --fs-mini: 0.5625rem;   /*  9px */
  --fs-xxs: 0.625rem;     /* 10px */
  --fs-xs: 0.6875rem;     /* 11px */
  --fs-sm: 0.75rem;       /* 12px */
  --fs-base: 0.8125rem;   /* 13px */
  --fs-md: 0.875rem;      /* 14px */
  --fs-lg: 0.9375rem;     /* 15px */
  --fs-xl: 1.0625rem;     /* 17px */
  --fs-2xl: 1.25rem;      /* 20px */
  --fs-3xl: 1.375rem;     /* 22px */
  --fs-4xl: 1.5rem;       /* 24px */
  --fs-5xl: 1.625rem;     /* 26px */
  --fs-6xl: 1.875rem;     /* 30px */
  --fs-7xl: 2.75rem;      /* 44px */
  --fs-display: clamp(1.6875rem, 3.1vw, 2.625rem);
  --fs-title: clamp(1.5rem, 2.6vw, 2.125rem);
  --fs-subtitle: clamp(1.25rem, 2.3vw, 1.875rem);
  --fs-tier: clamp(1.75rem, 3.4vw, 2.5rem);

  /* --- TIPOGRAFIA: pesos, entrelinha, tracking ----------------------- */
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --lh-flat: 1;
  --lh-title: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --tr-title: -0.04em;
  --tr-tight: -0.03em;
  --tr-body: -0.01em;
  --tr-label: 0.12em;
  --tr-label-wide: 0.2em;

  /* --- ESPACAMENTO ---------------------------------------------------- */
  --s-1: 0.25rem;   /*  4px */
  --s-2: 0.375rem;  /*  6px */
  --s-3: 0.5rem;    /*  8px */
  --s-4: 0.625rem;  /* 10px */
  --s-5: 0.75rem;   /* 12px */
  --s-6: 0.875rem;  /* 14px */
  --s-7: 1.125rem;  /* 18px */
  --s-8: 1.375rem;  /* 22px */
  --s-9: 1.75rem;   /* 28px */
  --s-10: 2.25rem;  /* 36px */
  --s-11: 3rem;     /* 48px */
  --s-12: 3.5rem;   /* 56px */

  /* --- LINHA, RAIO, SOMBRA ------------------------------------------- */
  --hair: 1px;
  --line-2: 2px;
  --r-xs: 0.3125rem;   /*  5px */
  --r-sm: 0.375rem;    /*  6px */
  --r-md: 0.5rem;      /*  8px */
  --r-lg: 0.625rem;    /* 10px */
  --r-xl: 0.75rem;     /* 12px */
  --r-2xl: 0.875rem;   /* 14px */
  --r-3xl: 1.125rem;   /* 18px */
  --r-4xl: 1.375rem;   /* 22px */
  --r-pill: 62.4375rem;
  --r-circle: 50%;
  --sh-card: 0 1px 3px rgba(14, 14, 16, 0.08);
  --sh-hover: 0 18px 40px -30px rgba(14, 14, 16, 0.4);
  --sh-pop: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
  --sh-drawer: 0 0 60px rgba(0, 0, 0, 0.28);
  --ring-hair: 0 0 0 1px rgba(0, 0, 0, 0.1);
  --ring-sel: 0 0 0 2px #FFFFFF, 0 0 0 4px #0E0E10;

  /* --- MEDIDAS DE LAYOUT -------------------------------------------- */
  --wrap: 85rem;          /* 1360px */
  --wrap-narrow: 34rem;
  --gutter: 1rem;         /* mobile */
  --gutter-lg: 2rem;      /* desktop */
  --touch: 2.75rem;       /* 44px — alvo minimo de toque */
  --field-h: 2.75rem;
  --swatch: 1.875rem;
  --tap-icon: 2.125rem;
  --drawer-w: 20rem;
  --sidebar-w: 15rem;
  --measure: 52ch;

  /* --- PROPORCOES --------------------------------------------------- */
  --ar-square: 1 / 1;
  --ar-photo: 4 / 3;
  --ar-wide: 16 / 10;
  --ar-portrait: 9 / 16;   /* 22/09: vídeo gravado no celular, na vertical — ver COMO TESTAMOS */

  /* --- MOVIMENTO ---------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur: 240ms;
  --dur-slow: 700ms;

  /* --- CAMADAS ------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 30;
  --z-header: 70;
  --z-scrim: 88;
  --z-drawer: 90;

  /* --- BREAKPOINTS ---------------------------------------------------
     Referencia. CSS nao aceita var() dentro de @media, entao o literal
     e repetido nas folhas. Principal = --bp-lg (64rem / 1024px).
     ------------------------------------------------------------------ */
  --bp-sm: 30rem;   /*  480px — 2 colunas de card */
  --bp-md: 48rem;   /*  768px — tablet, 3 colunas */
  --bp-lg: 64rem;   /* 1024px — PRINCIPAL: vira desktop */
  --bp-xl: 80rem;   /* 1280px — folga de gutter */
}