/* King Pesca — design tokens (identidade navy / menta / laranja) */

@import url("https://fonts.googleapis.com/css2?family=Goblin+One&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
  /* --- Fontes --- */
  --font-display: "Goblin One", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Paleta base --- */
  --navy-900: #01295F;
  --navy-800: #0B3670;
  --navy-700: #15437E;
  --accent-500: #FF8C42;
  --accent-600: #D97738;
  --accent-100: #FFEEE3;
  --mint-500: #B5FFE9;
  --mint-600: #9AD9C6;
  --mint-100: #DAFFF4;
  --mist-050: #F7F9FC;
  --sand-100: #EDF1F5;
  --sand-200: #dde4ec;
  --graphite-900: #1A1A2E;
  --grey-500: #6B7280;
  --grey-300: #9ca3af;
  --white: #ffffff;

  --success-500: #4DB882;
  --warning-500: #D98324;
  --danger-500: #C0453B;
  --info-500: var(--accent-600);

  --overlay-dark: rgba(1, 41, 95, 0.80);
  --overlay-scrim: rgba(1, 41, 95, 0.45);
  --overlay-light: rgba(247, 249, 252, 0.88);
  --hairline: rgba(1, 41, 95, 0.10);
  --hairline-strong: rgba(1, 41, 95, 0.18);
  --hairline-inverse: rgba(255, 255, 255, 0.20);

  /* --- Aliases semânticos --- */
  --bg-page: var(--mist-050);
  --bg-alt: var(--mint-100);
  --bg-inverse: var(--navy-900);
  --surface-card: var(--white);
  --surface-card-alt: var(--sand-100);
  --surface-sunken: var(--sand-200);

  --text-heading: var(--navy-900);
  --text-body: var(--graphite-900);
  --text-muted: var(--grey-500);
  --text-inverse: var(--white);
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --text-link: var(--navy-900);
  --text-link-hover: var(--accent-600);
  --text-price: var(--accent-600);

  --border-default: var(--hairline);
  --border-strong: var(--hairline-strong);
  --border-focus: var(--accent-600);

  --action-primary-bg: var(--navy-900);
  --action-primary-bg-hover: var(--navy-700);
  --action-primary-fg: var(--white);
  --action-secondary-bg: var(--accent-500);
  --action-secondary-bg-hover: var(--accent-600);
  --action-secondary-fg: var(--navy-900);
  --action-ghost-fg: var(--navy-900);
  --action-disabled-bg: var(--sand-200);
  --action-disabled-fg: var(--grey-300);

  /* --- Tipografia --- */
  --text-display: 3.5rem;
  --text-h1: 2.625rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-size: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-body: 1.5;

  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;
  --tracking-normal: 0;

  /* --- Espaçamento (grid 8pt) --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --container-max: 1200px;
  --container-pad: 24px;
  --container-pad-mobile: 16px;

  /* --- Radius --- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* --- Sombras (sempre navy-tinted) --- */
  --shadow-subtle: 0 1px 3px rgba(1, 41, 95, 0.06);
  --shadow-card: 0 4px 16px rgba(1, 41, 95, 0.08);
  --shadow-elevated: 0 8px 32px rgba(1, 41, 95, 0.12);
  --shadow-hero: 0 16px 48px rgba(1, 41, 95, 0.16);
  --shadow-focus: 0 0 0 3px rgba(255, 140, 66, 0.35);

  /* --- Motion --- */
  --duration-micro: 250ms;
  --duration-medium: 300ms;
  --duration-image: 400ms;
  --duration-enter: 600ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: ease-out;

  --stagger-step: 100ms;
  --lift-hover: -2px;
  --scale-card-hover: 1.02;
  --scale-image-hover: 1.05;
  --scale-in-from: 0.95;
  --enter-offset: 30px;
}