/* RN Design System — canonical CSS tokens. Do not duplicate raw values in components. */

@font-face {
  font-family: "Montserrat RN";
  src: url("../assets/fonts/montserrat.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand scale — extracted primarily from the Orçamento page. */
  --rn-brand-50: #eaf9fd;
  --rn-brand-100: #cff2fa;
  --rn-brand-200: #9be5f3;
  --rn-brand-300: #6bd8ec;
  --rn-brand-400: #3fd0e9;
  --rn-brand-500: #31bbd8;
  --rn-brand-600: #2399c3;
  --rn-brand-700: #1a6fae;
  --rn-brand-800: #14538c;
  --rn-brand-900: #0a2540;
  --rn-brand-950: #04101d;
  --rn-sky: #47abe1;
  --rn-blue-soft: #5a9aee;
  --rn-cyan: #3fd0e9;

  /* Story scenes — fixed editorial surfaces from the Orçamento page, not a theme. */
  --rn-scene-charcoal: #202020;
  --rn-scene-stage: #1a1d1d;
  --rn-scene-deep: #16191c;
  --rn-scene-ink: #0f1418;
  --rn-scene-text: #f3f3f3;
  --rn-scene-text-strong: #e8e8e8;
  --rn-scene-text-muted: #989898;

  /* Neutral scale — cool neutrals, never warm/beige. */
  --rn-neutral-0: #ffffff;
  --rn-neutral-50: #f8fbfd;
  --rn-neutral-100: #f4f8fb;
  --rn-neutral-200: #eaf2f7;
  --rn-neutral-300: #d9e6ee;
  --rn-neutral-400: #b7cbd7;
  --rn-neutral-500: #86a9bc;
  --rn-neutral-600: #617987;
  --rn-neutral-700: #526b7a;
  --rn-neutral-800: #26465b;
  --rn-neutral-900: #102a3d;
  --rn-neutral-950: #07141f;

  /* Status colors complement the brand; they do not replace it. */
  --rn-success-50: #ecfdf3;
  --rn-success-200: #abefc6;
  --rn-success-700: #067647;
  --rn-warning-50: #fffaeb;
  --rn-warning-200: #fedf89;
  --rn-warning-700: #b54708;
  --rn-danger-50: #fef3f2;
  --rn-danger-200: #fecdca;
  --rn-danger-700: #b42318;

  /* Typography. */
  --rn-font-sans: "Montserrat RN", "Montserrat", Arial, sans-serif;
  --rn-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --rn-font-size-1: 0.75rem;
  --rn-font-size-2: 0.8125rem;
  --rn-font-size-3: 0.875rem;
  --rn-font-size-4: 1rem;
  --rn-font-size-5: 1.125rem;
  --rn-font-size-6: 1.25rem;
  --rn-font-size-7: 1.5rem;
  --rn-font-size-8: 2rem;
  --rn-font-size-9: 2.5rem;
  --rn-font-size-10: 3.5rem;
  --rn-font-size-11: 4.5rem;
  --rn-font-size-12: 6rem;
  --rn-font-size-hero: clamp(4rem, 4.2vw, 5rem);
  --rn-font-size-hero-mobile: clamp(2.5rem, 13vw, 3.5rem);
  --rn-font-size-wordmark: clamp(5.25rem, 11.6vw, 13.25rem);
  --rn-font-size-wordmark-mobile: clamp(3.5rem, 18vw, 6rem);
  --rn-font-size-section: clamp(2.375rem, 3.8vw, 3.5rem);
  --rn-leading-wordmark: 0.94;
  --rn-leading-display: 0.98;
  --rn-leading-tight: 1.08;
  --rn-leading-section: 1.12;
  --rn-leading-hero: 1.14;
  --rn-leading-heading: 1.18;
  --rn-leading-story-copy: 1.45;
  --rn-leading-body: 1.6;
  --rn-leading-support: 1.7;
  --rn-leading-relaxed: 1.75;
  --rn-tracking-tight: -0.035em;
  --rn-tracking-heading: -0.02em;
  --rn-tracking-label: 0.015em;
  --rn-tracking-eyebrow: 0.12em;
  --rn-tracking-hero: -0.045em;
  --rn-tracking-signature: 0.52em;
  --rn-weight-regular: 400;
  --rn-weight-medium: 500;
  --rn-weight-semibold: 650;
  --rn-weight-bold: 700;
  --rn-weight-extrabold: 800;

  /* 4px/8px spatial rhythm. */
  --rn-space-0: 0;
  --rn-space-1: 0.25rem;
  --rn-space-2: 0.5rem;
  --rn-space-3: 0.75rem;
  --rn-space-4: 1rem;
  --rn-space-5: 1.5rem;
  --rn-space-6: 2rem;
  --rn-space-7: 2.5rem;
  --rn-space-8: 3rem;
  --rn-space-9: 4rem;
  --rn-space-10: 5rem;
  --rn-space-11: 6rem;
  --rn-space-12: 8rem;

  /* Geometry. */
  --rn-radius-xs: 0.375rem;
  --rn-radius-sm: 0.5rem;
  --rn-radius-md: 0.75rem;
  --rn-radius-lg: 1rem;
  --rn-radius-xl: 1.5rem;
  --rn-radius-2xl: 2rem;
  --rn-radius-pill: 999px;
  --rn-border-width: 1px;
  --rn-control-sm: 2.25rem;
  --rn-control-md: 2.75rem;
  --rn-control-lg: 3.25rem;
  --rn-target-min: 2.75rem;
  --rn-icon-sm: 1rem;
  --rn-icon-md: 1.25rem;
  --rn-icon-lg: 1.5rem;
  --rn-icon-xl: 2rem;

  /* Containers and responsive layout. */
  --rn-content-reading: 45rem;
  --rn-content-product: 75rem;
  --rn-content-wide: 90rem;
  --rn-content-story: 79.875rem;
  --rn-page-gutter: clamp(1.125rem, 4vw, 3rem);
  --rn-header-height: 3.75rem;
  --rn-grid-gap: clamp(1rem, 2vw, 1.5rem);
  --rn-story-column-main: 57.5rem;
  --rn-story-column-aside: 27rem;
  --rn-story-column-gap: 5.5rem;
  --rn-story-support-width: 27rem;
  --rn-story-hero-min-height: 67.5rem;
  --rn-story-hero-min-height-mobile: 48rem;
  --rn-story-scene-min-height: 45rem;
  --rn-story-section-space: 6.75rem;
  --rn-story-perspective: 87.5rem;
  --rn-wordmark-icon-min: 5.25rem;
  --rn-wordmark-icon-max: 10.75rem;
  --rn-wordmark-letter-space: 0.32em;
  --rn-sidebar-width: 15rem;
  --rn-dialog-width: 36rem;
  --rn-popover-width: 20rem;
  --rn-toast-width: 24rem;
  --rn-table-min-width: 42rem;
  --rn-empty-min-height: 18rem;
  --rn-textarea-min-height: 7.5rem;

  /* RN background composition — Orçamento primary; Product marks secondary. */
  --rn-grid-product: 2.5rem;
  --rn-grid-editorial-x: 10rem;
  --rn-grid-editorial-y: 11.25rem;
  --rn-motif-icon-lg: clamp(18rem, 34vw, 38rem);
  --rn-motif-icon-sm: clamp(3.75rem, 7vw, 7.5rem);
  --rn-motif-opacity-lg: 0.06;
  --rn-motif-opacity-sm: 0.14;
  --rn-orbit-sm: 7.5rem;
  --rn-orbit-lg: 22.5rem;
  --rn-stage-glow: min(62vw, 61.25rem);

  /* Elevation. */
  --rn-shadow-xs: 0 1px 2px rgba(4, 16, 29, 0.08);
  --rn-shadow-sm: 0 6px 18px rgba(4, 16, 29, 0.08);
  --rn-shadow-md: 0 12px 34px rgba(4, 16, 29, 0.12);
  --rn-shadow-lg: 0 28px 70px rgba(10, 37, 64, 0.13), 0 2px 10px rgba(26, 111, 174, 0.06);
  --rn-shadow-brand: 0 12px 28px rgba(26, 111, 174, 0.24);
  --rn-glow-brand: 0 0 44px rgba(63, 208, 233, 0.22);
  --rn-shadow-device: 0 32px 48px rgba(0, 0, 0, 0.26);
  --rn-shadow-wordmark: 0 18px 34px rgba(48, 150, 220, 0.35);
  --rn-blur-wordmark-entry: 18px;
  --rn-blur-wordmark-settle: 1.5px;

  /* Motion. Product UI should stay in fast/base; scene/ambient is Expressive only. */
  --rn-duration-instant: 100ms;
  --rn-duration-fast: 160ms;
  --rn-duration-base: 240ms;
  --rn-duration-slow: 420ms;
  --rn-duration-scene: 720ms;
  --rn-duration-reveal: 650ms;
  --rn-duration-chapter: 820ms;
  --rn-duration-count: 920ms;
  --rn-duration-entry: 580ms;
  --rn-duration-ambient: 64000ms;
  --rn-stagger-word: 50ms;
  --rn-stagger-wordmark: 62ms;
  --rn-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --rn-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --rn-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layering. */
  --rn-z-base: 0;
  --rn-z-raised: 10;
  --rn-z-sticky: 20;
  --rn-z-dropdown: 40;
  --rn-z-overlay: 60;
  --rn-z-modal: 80;
  --rn-z-toast: 100;
  --rn-z-skip-link: 1000;

  /* Semantic base. Product canvases stay white; story chapters use scene tokens. */
  --rn-color-background: #ffffff;
  --rn-color-surface: #ffffff;
  --rn-color-surface-soft: #f8fbfd;
  --rn-color-surface-muted: #f4f8fb;
  --rn-color-surface-brand: #eaf9fd;
  --rn-color-text: #07141f;
  --rn-color-text-subtle: #526b7a;
  --rn-color-text-muted: #617987;
  --rn-color-heading: #0a2540;
  --rn-color-border: #d9e6ee;
  --rn-color-border-strong: #b7cbd7;
  --rn-color-control-border: #617987;
  --rn-color-primary: #47abe1;
  --rn-color-primary-hover: #5a9aee;
  --rn-color-primary-active: #31bbd8;
  --rn-color-on-primary: #07141f;
  --rn-color-accent: #3fd0e9;
  --rn-color-accent-strong: #47abe1;
  --rn-color-on-accent: #07141f;
  --rn-color-brand-text: #1a6fae;
  --rn-color-focus: #14538c;
  --rn-color-focus-accent: #3fd0e9;
  --rn-color-link: #1a6fae;
  --rn-color-link-hover: #0a2540;
  --rn-color-overlay: rgba(4, 16, 29, 0.72);
  --rn-color-success: #067647;
  --rn-color-success-surface: #ecfdf3;
  --rn-color-warning: #b54708;
  --rn-color-warning-surface: #fffaeb;
  --rn-color-danger: #b42318;
  --rn-color-danger-surface: #fef3f2;
  --rn-color-scene: #202020;
  --rn-color-scene-stage: #1a1d1d;
  --rn-color-scene-deep: #16191c;
  --rn-color-on-scene: #f3f3f3;
  --rn-color-on-scene-strong: #e8e8e8;
  --rn-color-on-scene-muted: #989898;
  --rn-color-scene-border: rgba(82, 167, 225, 0.2);
  --rn-gradient-brand: linear-gradient(100deg, #47abe1, #3fd0e9);
  --rn-gradient-accent: linear-gradient(100deg, #5a9aee, #47abe1);
  --rn-gradient-wordmark: linear-gradient(100deg, #3fd0e9, #47abe1 54%, #5a9aee);
  --rn-gradient-progress: linear-gradient(90deg, #1a6fae, #47abe1 55%, #3fd0e9);
  --rn-gradient-scene: radial-gradient(circle at 50% -10%, rgba(48, 142, 208, 0.08), transparent 42%), #16191c;
  --rn-grid-line: rgba(38, 119, 178, 0.055);
  --rn-focus-ring: 0 0 0 3px #14538c;
}

@media (max-width: 599px) {
  :root {
    --rn-page-gutter: 1.125rem;
    --rn-header-height: 3.5rem;
    --rn-story-hero-min-height: max(var(--rn-story-hero-min-height-mobile), 100svh);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rn-duration-fast: 0.01ms;
    --rn-duration-base: 0.01ms;
    --rn-duration-slow: 0.01ms;
    --rn-duration-scene: 0.01ms;
    --rn-duration-reveal: 0.01ms;
    --rn-duration-chapter: 0.01ms;
    --rn-duration-count: 0.01ms;
    --rn-duration-entry: 0.01ms;
    --rn-duration-ambient: 0.01ms;
  }
}