@layer tokens, reset, base, layout, components, effects, utilities;
@layer tokens {
  :root {
    --itl-fundo: #f5f7fa;
    --itl-apoio: #e9eef3;
    --itl-paper: #fcfdfe;
    --itl-white: #ffffff;
    --itl-linha: #d6dbe3;
    --itl-linha-forte: #b5bfcb;
    --itl-texto: #121a25;
    --itl-texto-apoio: #505965;
    --itl-navy-50: #f0f4f9;
    --itl-navy-100: #e2e9f1;
    --itl-navy-200: #c6d2e2;
    --itl-navy-300: #9fb0c4;
    --itl-navy-400: #768ba6;
    --itl-navy-500: #536b89;
    --itl-navy-600: #3b516e;
    --itl-navy-700: #213147;
    --itl-navy-800: #152235;
    --itl-navy-900: #081425;
    --itl-ouro-50: #f7f3eb;
    --itl-ouro-100: #f0e7d6;
    --itl-ouro-200: #e1cfac;
    --itl-ouro-300: #ccb07e;
    --itl-ouro-400: #bc9e6d;
    --itl-ouro-500: #ab8d5d;
    --itl-ouro-600: #947443;
    --itl-ouro-700: #7d5d2a;
    --itl-ouro-800: #5c421b;
    --itl-ouro-900: #3b2b12;
    --itl-logo-shadow: #a47b4e;
    --itl-logo-mid: #c29c71;
    --itl-logo-light: #dec4a3;
    --itl-danger-100: #fee9e6;
    --itl-danger-300: #f8a49d;
    --itl-danger-700: #9a3936;
    --itl-danger-900: #47211e;
    --itl-success-100: #e0f5e6;
    --itl-success-300: #81d39f;
    --itl-success-700: #2c6c47;
    --itl-success-900: #173523;
    --itl-warning-100: #f9efc9;
    --itl-warning-300: #eacb6c;
    --itl-warning-700: #755900;
    --itl-warning-900: #382c0c;
    --itl-wa-400: #43c07a;
    --itl-wa-700: #156f41;
    --itl-wa-800: #095c34;
    --itl-institucional: var(--itl-navy-900);
    --itl-marinho-hover: var(--itl-navy-800);
    --itl-porcelana: var(--itl-fundo);
    --itl-gelo: var(--itl-apoio);
    --itl-ouro: var(--itl-ouro-300);
    --itl-ouro-claro: var(--itl-ouro-200);
    --itl-ouro-velho: var(--itl-ouro-500);
    --itl-ouro-profundo: var(--itl-ouro-700);
  }
  @supports (color: oklch(0% 0 0)) {
    :root {
      --itl-fundo: oklch(97.55% 0.0045 258.32);
      --itl-apoio: oklch(94.68% 0.0086 247.92);
      --itl-paper: oklch(99.3% 0.002 255);
      --itl-white: oklch(100% 0 0);
      --itl-linha: oklch(89% 0.012 255);
      --itl-linha-forte: oklch(80% 0.02 255);
      --itl-texto: oklch(21.54% 0.0249 256.47);
      --itl-texto-apoio: oklch(46.06% 0.0226 255.63);
      --itl-navy-50: oklch(96.6% 0.008 254);
      --itl-navy-100: oklch(93% 0.014 255);
      --itl-navy-200: oklch(86% 0.025 255.6);
      --itl-navy-300: oklch(75% 0.035 252.5);
      --itl-navy-400: oklch(63% 0.048 255);
      --itl-navy-500: oklch(52% 0.055 255);
      --itl-navy-600: oklch(43% 0.055 255.6);
      --itl-navy-700: oklch(31% 0.045 257);
      --itl-navy-800: oklch(25% 0.04 257);
      --itl-navy-900: oklch(19.03% 0.0389 257.07);
      --itl-ouro-50: oklch(96.5% 0.012 85);
      --itl-ouro-100: oklch(93% 0.025 84);
      --itl-ouro-200: oklch(86.04% 0.0507 83.94);
      --itl-ouro-300: oklch(76.97% 0.0737 81.67);
      --itl-ouro-400: oklch(71.5% 0.074 79.5);
      --itl-ouro-500: oklch(65.99% 0.0742 78.68);
      --itl-ouro-600: oklch(58% 0.078 77);
      --itl-ouro-700: oklch(50.07% 0.0796 76.77);
      --itl-ouro-800: oklch(40% 0.065 76);
      --itl-ouro-900: oklch(30% 0.045 76);
      --itl-logo-shadow: oklch(61.3% 0.08 68);
      --itl-logo-mid: oklch(71.7% 0.074 69.7);
      --itl-logo-light: oklch(83.4% 0.053 73.6);
      --itl-danger-100: oklch(95% 0.024 25);
      --itl-danger-300: oklch(80% 0.1 25);
      --itl-danger-700: oklch(48% 0.13 25);
      --itl-danger-900: oklch(30% 0.06 25);
      --itl-success-100: oklch(95% 0.03 155);
      --itl-success-300: oklch(80% 0.11 155);
      --itl-success-700: oklch(48% 0.09 155);
      --itl-success-900: oklch(30% 0.05 155);
      --itl-warning-100: oklch(95% 0.05 95);
      --itl-warning-300: oklch(85% 0.12 92);
      --itl-warning-700: oklch(48% 0.098 88);
      --itl-warning-900: oklch(30% 0.05 90);
      --itl-wa-400: oklch(72% 0.15 155);
      --itl-wa-700: oklch(48% 0.11 155);
      --itl-wa-800: oklch(42% 0.1 155);
    }
  }
  :root {
    --gradient-gold: linear-gradient(135deg, var(--itl-ouro-500), var(--itl-ouro-200) 50%, var(--itl-ouro-500));
    --gradient-gold-soft: linear-gradient(180deg, var(--itl-ouro-50), var(--itl-ouro-100));
    --gradient-logo: linear-gradient(135deg, var(--itl-logo-shadow), var(--itl-logo-light) 50%, var(--itl-logo-shadow));
    --gradient-deep: linear-gradient(160deg, var(--itl-navy-900), var(--itl-navy-800));
  }
  @supports (background: linear-gradient(in oklab, red, blue)) {
    :root {
      --gradient-gold: linear-gradient(in oklab 135deg, var(--itl-ouro-500), var(--itl-ouro-200) 50%, var(--itl-ouro-500));
      --gradient-gold-soft: linear-gradient(in oklab 180deg, var(--itl-ouro-50), var(--itl-ouro-100));
      --gradient-logo: linear-gradient(in oklab 135deg, var(--itl-logo-shadow), var(--itl-logo-light) 50%, var(--itl-logo-shadow));
      --gradient-deep: linear-gradient(in oklab 160deg, var(--itl-navy-900), var(--itl-navy-800));
    }
  }
  :root {
    color-scheme: light;
    --bg-page: var(--itl-fundo);
    --bg-surface: var(--itl-paper);
    --bg-elevated: var(--itl-white);
    --bg-hover: var(--itl-apoio);
    --bg-tint: var(--itl-apoio);
    --bg-mist: var(--itl-navy-100);
    --bg-brand: var(--itl-navy-900);
    --text-strong: var(--itl-navy-900);
    --text-body: var(--itl-texto);
    --text-muted: var(--itl-texto-apoio);
    --text-brand: var(--itl-navy-600);
    --line-subtle: var(--itl-linha);
    --line-strong: var(--itl-linha-forte);
    --line-accent: var(--itl-ouro-500);
    --accent: var(--itl-ouro-500);
    --accent-strong: var(--itl-ouro-700);
    --accent-soft: var(--itl-ouro-100);
    --accent-on-soft: var(--itl-ouro-800);
    --action-primary-bg: var(--itl-navy-900);
    --action-primary-bg-hover: var(--itl-navy-800);
    --action-primary-bg-active: var(--itl-navy-700);
    --action-primary-text: var(--itl-fundo);
    --action-accent-bg: var(--itl-ouro-300);
    --action-accent-bg-hover: var(--itl-ouro-200);
    --action-accent-bg-active: var(--itl-ouro-400);
    --action-accent-text: var(--itl-navy-900);
    --action-secondary-border: var(--itl-navy-900);
    --action-secondary-text: var(--itl-navy-900);
    --action-secondary-bg-hover: var(--itl-navy-100);
    --action-whatsapp-bg: var(--itl-wa-700);
    --action-whatsapp-bg-hover: var(--itl-wa-800);
    --action-whatsapp-text: var(--itl-white);
    --action-disabled-bg: var(--itl-linha);
    --action-disabled-text: var(--itl-texto-apoio);
    --link: var(--itl-navy-600);
    --link-hover: var(--itl-navy-900);
    --field-bg: var(--itl-white);
    --field-text: var(--itl-texto);
    --field-border: var(--itl-navy-500);
    --field-border-hover: var(--itl-navy-600);
    --field-border-focus: var(--itl-navy-900);
    --focus-ring-color: var(--itl-navy-600);
    --selection-bg: var(--itl-ouro-200);
    --selection-text: var(--itl-navy-900);
    --state-danger-fg: var(--itl-danger-700);
    --state-danger-bg: var(--itl-danger-100);
    --state-danger-border: var(--itl-danger-300);
    --state-success-fg: var(--itl-success-700);
    --state-success-bg: var(--itl-success-100);
    --state-success-border: var(--itl-success-300);
    --state-warning-fg: var(--itl-warning-700);
    --state-warning-bg: var(--itl-warning-100);
    --state-warning-border: var(--itl-warning-300);
    --state-info-fg: var(--itl-navy-600);
    --state-info-bg: var(--itl-navy-100);
    --state-info-border: var(--itl-navy-300);
    --shadow-color-soft: rgb(8 20 37 / 0.08);
    --shadow-color: rgb(8 20 37 / 0.16);
    --overlay-scrim: rgb(8 20 37 / 0.6);
  }
  @supports (color: oklch(0% 0 0)) {
    :root {
      --shadow-color-soft: oklch(19% 0.039 257 / 0.08);
      --shadow-color: oklch(19% 0.039 257 / 0.16);
      --overlay-scrim: oklch(19% 0.039 257 / 0.6);
    }
  }
  [data-surface="apoio"], .surface-apoio {
    --bg-page: var(--itl-apoio);
    --bg-hover: var(--itl-linha);
    --bg-tint: var(--itl-fundo);
    --line-subtle: var(--itl-linha-forte);
    --line-strong: var(--itl-navy-300);
    --action-secondary-bg-hover: var(--itl-navy-200);
  }
  [data-surface="deep"], .surface-deep {
    color-scheme: dark;
    --bg-page: var(--itl-navy-900);
    --bg-surface: var(--itl-navy-800);
    --bg-elevated: var(--itl-navy-700);
    --bg-hover: var(--itl-navy-800);
    --bg-tint: var(--itl-navy-800);
    --bg-mist: var(--itl-navy-700);
    --text-strong: var(--itl-fundo);
    --text-body: var(--itl-apoio);
    --text-muted: var(--itl-navy-200);
    --text-brand: var(--itl-fundo);
    --line-subtle: var(--itl-navy-700);
    --line-strong: var(--itl-navy-600);
    --line-accent: var(--itl-ouro-300);
    --accent: var(--itl-ouro-300);
    --accent-strong: var(--itl-ouro-300);
    --accent-soft: var(--itl-ouro-900);
    --accent-on-soft: var(--itl-ouro-200);
    --action-primary-bg: var(--itl-ouro-300);
    --action-primary-bg-hover: var(--itl-ouro-200);
    --action-primary-bg-active: var(--itl-ouro-400);
    --action-primary-text: var(--itl-navy-900);
    --action-accent-bg: var(--itl-ouro-200);
    --action-accent-bg-hover: var(--itl-ouro-100);
    --action-accent-bg-active: var(--itl-ouro-300);
    --action-accent-text: var(--itl-navy-900);
    --action-secondary-border: var(--itl-ouro-200);
    --action-secondary-text: var(--itl-ouro-200);
    --action-secondary-bg-hover: var(--itl-navy-800);
    --action-whatsapp-bg: var(--itl-wa-400);
    --action-whatsapp-bg-hover: var(--itl-success-300);
    --action-whatsapp-text: var(--itl-navy-900);
    --action-disabled-bg: var(--itl-navy-700);
    --action-disabled-text: var(--itl-navy-300);
    --link: var(--itl-ouro-300);
    --link-hover: var(--itl-ouro-200);
    --field-bg: var(--itl-navy-800);
    --field-text: var(--itl-fundo);
    --field-border: var(--itl-navy-300);
    --field-border-hover: var(--itl-navy-200);
    --field-border-focus: var(--itl-ouro-300);
    --focus-ring-color: var(--itl-ouro-300);
    --selection-bg: var(--itl-ouro-300);
    --selection-text: var(--itl-navy-900);
    --state-danger-fg: var(--itl-danger-300);
    --state-danger-bg: var(--itl-danger-900);
    --state-danger-border: var(--itl-danger-700);
    --state-success-fg: var(--itl-success-300);
    --state-success-bg: var(--itl-success-900);
    --state-success-border: var(--itl-success-700);
    --state-warning-fg: var(--itl-warning-300);
    --state-warning-bg: var(--itl-warning-900);
    --state-warning-border: var(--itl-warning-700);
    --state-info-fg: var(--itl-navy-200);
    --state-info-bg: var(--itl-navy-800);
    --state-info-border: var(--itl-navy-600);
    --shadow-color-soft: rgb(1 3 9 / 0.3);
    --shadow-color: rgb(1 3 9 / 0.5);
  }
  @supports (color: oklch(0% 0 0)) {
    [data-surface="deep"], .surface-deep {
      --shadow-color-soft: oklch(10% 0.02 257 / 0.3);
      --shadow-color: oklch(10% 0.02 257 / 0.5);
    }
  }
  :root, [data-surface], .surface-apoio, .surface-deep {
    --shadow-sm: 0 1px 2px var(--shadow-color-soft), 0 2px 8px var(--shadow-color-soft);
    --shadow-md: 0 2px 4px var(--shadow-color-soft), 0 12px 28px var(--shadow-color-soft);
    --shadow-lg: 0 4px 8px var(--shadow-color-soft), 0 24px 56px var(--shadow-color);
  }
}
@layer base {
  [data-surface], .surface-apoio, .surface-deep {
    background-color: var(--bg-page);
    color: var(--text-body);
  }
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }
  :focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 3px;
  }
}