:root {
  /* =========================================================
     WORKSHOP IA — MASTER DESIGN TOKENS · v1.0
     Petróleo estrutura. Papel respira. Magenta emociona.
     Lima comprova. Tipografia editorial humaniza.
     ========================================================= */

  /* Brand color primitives */
  --wi-petrol-1000: #001820;
  --wi-petrol-950: #021f29;
  --wi-petrol-900: #032f3d;
  --wi-petrol-800: #064b5f;
  --wi-petrol-700: #086278;
  --wi-petrol-100: #dbe8ea;
  --wi-magenta-800: #720568;
  --wi-magenta-700: #8f087f;
  --wi-magenta-500: #d02bb5;
  --wi-magenta-300: #f08cdc;
  --wi-magenta-100: #f9d8f2;
  --wi-lime-500: #d9f65b;
  --wi-lime-200: #effbbd;
  --wi-paper: #fffdf8;
  --wi-cream-100: #f6f0e5;
  --wi-cream-300: #eae0cf;
  --wi-white: #ffffff;
  --wi-black: #001015;

  /* Functional color aliases */
  --wi-bg-page: var(--wi-paper);
  --wi-bg-section: var(--wi-cream-100);
  --wi-bg-inverse: var(--wi-petrol-950);
  --wi-bg-card: var(--wi-white);
  --wi-text-primary: var(--wi-petrol-900);
  --wi-text-secondary: #41616a;
  --wi-text-tertiary: #70868b;
  --wi-text-inverse: var(--wi-white);
  --wi-text-inverse-muted: #b8cdd1;
  --wi-accent-emotion: var(--wi-magenta-700);
  --wi-accent-emotion-bright: var(--wi-magenta-500);
  --wi-accent-proof: var(--wi-lime-500);
  --wi-border: #ded5c5;
  --wi-border-inverse: rgba(255, 255, 255, .17);
  --wi-focus: var(--wi-lime-500);

  /* Approved semantic states */
  --wi-success: #167153;
  --wi-warning: #a85a0a;
  --wi-danger: #a52b3f;
  --wi-info: var(--wi-petrol-700);

  /* Typography */
  --wi-font-display: "Fraunces", Georgia, serif;
  --wi-font-body: "Manrope", "Helvetica Neue", sans-serif;
  --wi-font-data: "IBM Plex Mono", "Courier New", monospace;

  /* Fluid web type scale */
  --wi-type-display-xl: clamp(3.4rem, 7.4vw, 6.9rem);
  --wi-type-display-lg: clamp(2.8rem, 6vw, 5.2rem);
  --wi-type-h1: clamp(2.55rem, 5.2vw, 4.8rem);
  --wi-type-h2: clamp(2.05rem, 4vw, 3.65rem);
  --wi-type-h3: clamp(1.45rem, 2.2vw, 2rem);
  --wi-type-lead: clamp(1.08rem, 1.5vw, 1.3rem);
  --wi-type-body-lg: 1.125rem;
  --wi-type-body: 1rem;
  --wi-type-small: .875rem;
  --wi-type-micro: .75rem;

  /* Static editorial scale for exported art */
  --wi-art-display: 108px;
  --wi-art-h1: 82px;
  --wi-art-h2: 58px;
  --wi-art-lead: 30px;
  --wi-art-body: 22px;
  --wi-art-micro: 14px;

  /* Line height and tracking */
  --wi-leading-display: .96;
  --wi-leading-heading: 1.04;
  --wi-leading-body: 1.65;
  --wi-tracking-display: -.04em;
  --wi-tracking-data: .13em;

  /* Spacing — base 4, primary rhythm 8 */
  --wi-space-0: 0;
  --wi-space-1: 4px;
  --wi-space-2: 8px;
  --wi-space-3: 12px;
  --wi-space-4: 16px;
  --wi-space-5: 24px;
  --wi-space-6: 32px;
  --wi-space-7: 48px;
  --wi-space-8: 64px;
  --wi-space-9: 80px;
  --wi-space-10: 104px;
  --wi-space-11: 144px;
  --wi-space-section: clamp(72px, 9vw, 128px);

  /* Layout */
  --wi-container-wide: 1180px;
  --wi-container-reading: 780px;
  --wi-container-narrow: 620px;
  --wi-gutter: clamp(20px, 4vw, 48px);
  --wi-grid-gap: clamp(20px, 3vw, 40px);

  /* Radius */
  --wi-radius-xs: 4px;
  --wi-radius-sm: 6px;
  --wi-radius-md: 10px;
  --wi-radius-lg: 18px;
  --wi-radius-xl: 28px;
  --wi-radius-pill: 999px;

  /* Depth */
  --wi-shadow-soft: 0 2px 0 rgba(3, 47, 61, .08),
                    0 12px 32px rgba(3, 47, 61, .07);
  --wi-shadow-raised: 0 2px 0 rgba(3, 47, 61, .1),
                      0 26px 64px rgba(3, 47, 61, .13);
  --wi-shadow-editorial: 12px 14px 0 rgba(3, 47, 61, .13);
  --wi-shadow-magenta: 8px 9px 0 var(--wi-magenta-500);
  --wi-shadow-lime: 8px 9px 0 var(--wi-lime-500);

  /* Motion */
  --wi-duration-fast: 160ms;
  --wi-duration-medium: 320ms;
  --wi-duration-slow: 650ms;
  --wi-ease-standard: cubic-bezier(.22, .61, .36, 1);
  --wi-ease-emphasis: cubic-bezier(.16, 1, .3, 1);

  /* Layers */
  --wi-z-base: 0;
  --wi-z-content: 10;
  --wi-z-floating: 30;
  --wi-z-nav: 60;
  --wi-z-modal: 100;
  --wi-z-grain: 200;

  /* Common safe areas */
  --wi-safe-feed: 80px;
  --wi-safe-square: 72px;
  --wi-safe-story-side: 72px;
  --wi-safe-story-top: 250px;
  --wi-safe-story-bottom: 310px;
  --wi-safe-landscape: 56px;
}

/* Context themes */
.wi-theme-light {
  --wi-surface: var(--wi-paper);
  --wi-surface-raised: var(--wi-white);
  --wi-copy: var(--wi-text-primary);
  --wi-copy-muted: var(--wi-text-secondary);
  --wi-highlight: var(--wi-magenta-700);
  --wi-rule: var(--wi-border);
}

.wi-theme-dark {
  --wi-surface: var(--wi-petrol-950);
  --wi-surface-raised: var(--wi-petrol-900);
  --wi-copy: var(--wi-white);
  --wi-copy-muted: var(--wi-text-inverse-muted);
  --wi-highlight: var(--wi-magenta-300);
  --wi-rule: var(--wi-border-inverse);
}

/* Media format metadata, available to design automation */
@custom-media --wi-mobile (width <= 720px);
@custom-media --wi-tablet (width <= 980px);

@media (prefers-reduced-motion: reduce) {
  :root {
    --wi-duration-fast: 1ms;
    --wi-duration-medium: 1ms;
    --wi-duration-slow: 1ms;
  }
}