/* Iollo Design System — tokens · v1.0 · 26 agosto 2026 */
:root {
  color-scheme: light;

  /* Primitivos de marca */
  --io-ivory-50: #FCFAF6; --io-ivory-100: #F7F3EC; --io-ivory-200: #EFEAE1;
  --io-ivory-300: #E6DED1; --io-white: #FFFFFF;
  --io-ink-950: #232625; --io-ink-800: #3C403E; --io-ink-600: #6E6B65;
  --io-ink-550: #746F66; --io-ink-450: #8E8880;
  --io-turq-500: #13BCCF; --io-turq-700: #0C7B88; --io-turq-100: #E8F7F9;
  --io-gold-300: #F8D390; --io-gold-500: #E9BC79; --io-gold-600: #D8A660;
  --io-gold-700: #986519; --io-gold-100: #FFF8E8; --io-warm-light: #FAE8B6;
  --io-coral-500: #D96D5C; --io-coral-700: #C5432E; --io-coral-100: #FFF0EC;
  --io-green-500: #2F9E6F; --io-green-700: #267E59; --io-green-100: #EAF7F0;
  --io-red-600: #B42318; --io-red-100: #FEECE9;
  --io-blue-600: #186AA5; --io-blue-100: #EAF4FB;
  --io-amber-600: #9A6700; --io-amber-100: #FFF4D6;
  --io-team-benfica: #D71920; --io-team-sporting: #149447;
  --io-team-porto: #1769AA; --io-team-braga: #C32638;
  --io-team-neutral: #171918; --io-team-famalicao: #E7C321;

  /* Gradientes autorizados */
  --io-gold-control-light: #F7CA7D; --io-gold-control-deep: #ECB35C;
  --io-gradient-gold: linear-gradient(135deg, var(--io-gold-control-light) 0%, var(--io-gold-control-deep) 100%);
  --io-gradient-character: radial-gradient(circle at 50% 62%, var(--io-warm-light), var(--io-gold-500) 70%, var(--io-gold-600));
  --io-gradient-media: linear-gradient(180deg, transparent 30%, rgba(14,18,16,.86) 100%);
  --io-gradient-skeleton: linear-gradient(90deg, var(--io-ivory-200) 25%, var(--io-ivory-50) 50%, var(--io-ivory-200) 75%);
  --io-gradient-sports-hero: linear-gradient(180deg, rgba(14,18,16,.04) 0%, rgba(14,18,16,.28) 46%, rgba(14,18,16,.96) 100%), radial-gradient(ellipse at 50% 8%, #D27650 0%, #6C3C3A 31%, #263A2A 62%, #101713 100%);
  --io-gradient-benfica: linear-gradient(145deg, #7F090D, var(--io-team-benfica) 52%, #3D0608);
  --io-gradient-f1: linear-gradient(145deg, var(--io-turq-700), var(--io-turq-500));
  --io-sports-scrim-soft: rgba(14,18,16,.5); --io-sports-checker: rgba(255,255,255,.92);

  /* Semântica */
  /* App background sampled from the approved screenshot (11 Sep 2026). */
  --io-canvas: #F7F3ED; --io-surface: var(--io-white);
  --io-stage-canvas: #E2DED6;
  --io-surface-raised: var(--io-white); --io-surface-sunk: var(--io-ivory-200);
  --io-surface-soft: var(--io-ivory-50); --io-scrim: rgba(35,38,37,.48);
  --io-text: var(--io-ink-950); --io-text-secondary: var(--io-ink-600);
  --io-text-muted: var(--io-ink-550); --io-text-inverse: var(--io-white);
  --io-text-on-gold: var(--io-ink-950);
  --io-border: var(--io-ivory-300); --io-border-control: var(--io-ink-450);
  --io-border-focus: var(--io-turq-500);
  --io-action-primary: var(--io-gradient-gold); --io-action-primary-text: var(--io-text-on-gold);
  --io-action-brand: var(--io-turq-500); --io-action-brand-text: var(--io-ink-950);
  --io-action-quiet: transparent; --io-message-user: #F2E4C9; --io-player-track: rgba(255,255,255,.4);
  --io-success: var(--io-green-700); --io-success-soft: var(--io-green-100);
  --io-warning: var(--io-amber-600); --io-warning-soft: var(--io-amber-100);
  --io-danger: var(--io-red-600); --io-danger-soft: var(--io-red-100);
  --io-info: var(--io-blue-600); --io-info-soft: var(--io-blue-100);
  --io-live: var(--io-red-600); --io-live-text: var(--io-white);
  --io-accent: var(--io-turq-500); --io-accent-text: var(--io-turq-700);
  --io-accent-soft: var(--io-turq-100);
  --io-character-stage: var(--io-gradient-character);

  /* Marcas de parceiros: apenas dentro de módulos identificados */
  --io-partner-green: #0B7A43; --io-partner-blue: #006CB7;
  --io-partner-red: #E30613; --io-partner-orange: #E68A00;
  --io-partner-bet: #FFD400; --io-partner-bet-bg: #090A09;

  /* Tipografia */
  --io-font: 'Plus Jakarta Sans', 'Avenir Next', sans-serif;
  --io-font-data: 'Plus Jakarta Sans', 'Avenir Next', sans-serif;
  --io-scale: 1;
  --io-type-xs: calc(13px * var(--io-scale)); --io-type-sm: calc(14px * var(--io-scale));
  --io-type-md: calc(16px * var(--io-scale)); --io-type-lg: calc(18px * var(--io-scale));
  --io-type-xl: calc(22px * var(--io-scale)); --io-type-2xl: calc(28px * var(--io-scale));
  --io-type-3xl: calc(36px * var(--io-scale));
  --io-leading-tight: 1.22; --io-leading-body: 1.45; --io-leading-roomy: 1.65;
  --io-tracking-tight: -.025em; --io-tracking-label: .045em;

  /* Shared mobile rhythm, measured against 04-MOCKUPS at 430 CSS px.
     Keep input text at 16 px and interactive targets at least 44 px. */
  --io-type-intro: var(--io-type-xs); --io-type-section: var(--io-type-sm);
  --io-type-control: var(--io-type-xs); --io-type-page: var(--io-type-md);
  --io-weight-heading: 600; --io-weight-control: 500;
  --io-page-gutter: clamp(16px, 4.65vw, 20px);
  --io-header-height: 56px; --io-wordmark-width: 72px;
  --io-section-gap: 16px; --io-content-gap: 8px;

  /* Espaço */
  --io-space-0: 0; --io-space-1: 4px; --io-space-2: 8px; --io-space-3: 12px;
  --io-space-4: 16px; --io-space-5: 20px; --io-space-6: 24px; --io-space-8: 32px;
  --io-space-10: 40px; --io-space-12: 48px; --io-space-16: 64px;

  /* Navigation reference selected on 10 September 2026. */
  --io-nav-active: #00AFC6; --io-nav-inactive: #6E6B65; --io-live-indicator: #E60012;

  /* Tamanhos funcionais */
  --io-tap: 44px; --io-icon-sm: 16px; --io-icon-md: 20px; --io-icon-lg: 24px;
  --io-icon-xl: 32px; --io-avatar-xs: 28px; --io-avatar-sm: 36px;
  --io-avatar-md: 52px; --io-avatar-lg: 80px; --io-character-hero: 132px;
  --io-progress-height: 6px; --io-content-max: 1120px; --io-reading-max: 66ch;
  --io-phone-max: 430px; --io-tabbar-height: 60px; --io-composer-height: 52px;

  /* Forma */
  --io-radius-xs: 6px; --io-radius-sm: 8px; --io-radius-md: 14px;
  --io-radius-lg: 20px; --io-radius-pill: 28px; --io-radius-round: 999px;
  --io-stroke-hairline: 1px; --io-stroke-focus: 3px;
  --io-shadow-card: 0 1px 2px rgba(35,38,37,.04), 0 8px 22px rgba(35,38,37,.055);
  --io-shadow-control: 0 1px 2px rgba(35,38,37,.04), 0 4px 12px rgba(35,38,37,.05);
  --io-shadow-gold: 0 2px 6px rgba(216,166,96,.35), 0 10px 26px rgba(233,188,121,.45);
  --io-shadow-overlay: 0 24px 60px rgba(35,38,37,.18);

  /* Movimento e camadas */
  --io-duration-fast: 120ms; --io-duration-base: 180ms;
  --io-duration-slow: 260ms; --io-duration-state: 420ms;
  --io-ease: cubic-bezier(.2,.7,.3,1); --io-ease-bounce: cubic-bezier(.2,.8,.2,1.15);
  --io-z-base: 0; --io-z-sticky: 20; --io-z-overlay: 40; --io-z-toast: 60;
}

[data-density="confortavel"] {
  --io-scale: 1.12; --io-tap: 52px; --io-composer-height: 68px; --io-tabbar-height: 76px;
}

[data-mode="iollo"] { --io-accent: var(--io-turq-500); --io-accent-text: var(--io-turq-700); --io-accent-soft: var(--io-turq-100); }
[data-mode="para-ti"] { --io-accent: var(--io-coral-500); --io-accent-text: var(--io-coral-700); --io-accent-soft: var(--io-coral-100); }
[data-mode="desporto"] { --io-accent: var(--io-green-500); --io-accent-text: var(--io-green-700); --io-accent-soft: var(--io-green-100); }
[data-mode="fazer"] { --io-accent: var(--io-gold-500); --io-accent-text: var(--io-gold-700); --io-accent-soft: var(--io-gold-100); }

[data-theme="escuro"] {
  color-scheme: dark;
  --io-canvas: #141715; --io-surface: #1E2220; --io-surface-raised: #252A27;
  --io-stage-canvas: var(--io-canvas);
  --io-surface-sunk: #101312; --io-surface-soft: #191D1B; --io-scrim: rgba(0,0,0,.68);
  --io-text: #F7F3EC; --io-text-secondary: #B4AEA4; --io-text-muted: #A9A298;
  --io-text-inverse: #141715; --io-border: #343A36; --io-border-control: #777D78;
  --io-border-focus: #4FD8E8; --io-action-brand: #4FD8E8; --io-message-user: #33301F;
  --io-success: #5FCB98; --io-success-soft: #16241E;
  --io-warning: #F0C98F; --io-warning-soft: #2D261A;
  --io-danger: #FF8B7D; --io-danger-soft: #2A1E1B;
  --io-info: #79BEE8; --io-info-soft: #14242E; --io-live: #E5533F;
  --io-turq-700: #4FD8E8; --io-gold-700: #F0C98F;
  --io-coral-700: #F0917E; --io-green-700: #5FCB98;
  --io-turq-100: #14262A; --io-gold-100: #262017;
  --io-coral-100: #2A1E1B; --io-green-100: #16241E;
  --io-gradient-skeleton: linear-gradient(90deg, #1E2220 25%, #2A302C 50%, #1E2220 75%);
  --io-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35);
  --io-shadow-control: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.3);
  --io-shadow-overlay: 0 24px 60px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --io-duration-fast: 0ms; --io-duration-base: 0ms; --io-duration-slow: 0ms; --io-duration-state: 0ms; }
}