/* Rent split design tokens. The single source of every visual value.
   The app copies this file byte for byte. Warm neutral ramp, one teal accent. */

:root, [data-theme="light"] {
  color-scheme: light;

  /* Color: warm neutrals */
  --color-bg: #f8f6f1;
  --color-surface: #fffefb;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #efebe3;
  --color-surface-hover: #f2efe8;
  --color-text: #1f1c17;
  --color-text-muted: #5f594e;
  --color-border: #e2ddd2;
  --color-border-strong: #8a8273;
  --color-overlay: #1f1c1773;

  /* Color: glass (the nav bar and the page menu, over a backdrop blur) */
  --color-glass: #fffefbb8;
  --color-glass-edge: #ffffffb3;
  --color-glass-border: #e2ddd2cc;

  /* Color: accent (teal) */
  --color-accent: #0f6b66;
  --color-accent-hover: #0b5753;
  --color-accent-text: #ffffff;
  --color-accent-soft: #e1efec;
  --color-accent-soft-text: #0a4f4b;
  --color-focus: #0f6b66;

  /* Color: the split strip (graphics, labelled in text) */
  --color-chart-1: #0f6b66;
  --color-chart-2: #4a8780;

  /* Color: the hero floor plan, the full background of the hero (the faces of the 3D blocks; the tops use chart-1, chart-2 and surface-sunken) */
  --color-scene-1-front: #0c5652;
  --color-scene-1-side: #0a4743;
  --color-scene-2-front: #3b6c66;
  --color-scene-2-side: #315954;
  --color-scene-floor-front: #d7d4cc;
  --color-scene-floor-side: #c4c1ba;
  --color-hero-scrim: #f8f6f1e6;

  /* Color: status */
  --color-success: #2f6a2c;
  --color-success-soft: #e3f0df;
  --color-warning: #7f5200;
  --color-warning-soft: #f9eed6;
  --color-danger: #b3261e;
  --color-danger-hover: #951f19;
  --color-danger-text: #ffffff;
  --color-danger-soft: #fbe8e5;
  --color-info: #22539a;
  --color-info-soft: #e4ecf7;

  /* Font */
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  /* Type scale (1.25 ratio, rem so the reader's font size applies) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.05em;

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

  /* Space: 4 px base */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Size */
  --size-control: 44px;
  --size-control-sm: 36px;
  --size-icon: 20px;
  --size-icon-sm: 16px;
  --size-avatar: 32px;
  --size-strip: 48px;
  --size-slider-track: 6px;
  --size-slider-thumb: 24px;

  /* Shape: one radius family */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --border-width: 1px;
  --border-focus: 2px;

  /* Elevation: warm tinted, soft, layered */
  --shadow-sm: 0 1px 2px #1f1c170f, 0 0 0 1px #1f1c170a;
  --shadow-md: 0 1px 3px #1f1c1712, 0 6px 16px -4px #1f1c1717;
  --shadow-lg: 0 2px 6px #1f1c1714, 0 18px 40px -12px #1f1c1729;
  --shadow-glass: inset 0 1px 0 var(--color-glass-edge), 0 1px 2px #1f1c170a, 0 10px 28px -10px #1f1c1726;

  /* Glass: the backdrop filter of the nav bar and the page menu */
  --size-glass-blur: 20px;
  --size-glass-saturate: 1.8;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-reveal: 600ms;
  --duration-scene: 900ms;
  --duration-hold: 1500ms;
  --motion-press-scale: 0.96;
  --motion-rise: 16px;
  --motion-lift: 4px;
  --motion-dim: 0.3;
  --motion-stagger: 100ms;

  /* Layers */
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 40;
  --z-toast: 50;

  /* Layout */
  --layout-content: 72rem;
  --layout-prose: 40rem;
  --layout-narrow: 26rem;
  --layout-gutter: 16px;
  --layout-gutter-wide: 32px;
  --layout-nav-height: 64px;
  --layout-nav-bar: 56px;
  --layout-nav-inset: 8px;
  --layout-tabbar-height: 64px;
  --layout-hero-copy: 35rem;
  --layout-hero-scene: 20rem;
  --layout-hero-fade: 24rem;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #171512;
  --color-surface: #1f1c18;
  --color-surface-raised: #29261f;
  --color-surface-sunken: #12100d;
  --color-surface-hover: #2d2a23;
  --color-text: #eeeae2;
  --color-text-muted: #aaa294;
  --color-border: #38332b;
  --color-border-strong: #857c6d;
  --color-overlay: #0a090799;

  --color-glass: #1f1c18b8;
  --color-glass-edge: #ffffff0f;
  --color-glass-border: #38332bcc;

  --color-accent: #6bb5ac;
  --color-accent-hover: #86c4bc;
  --color-accent-text: #0c1f1d;
  --color-accent-soft: #1c3431;
  --color-accent-soft-text: #a6d6cf;
  --color-focus: #86c4bc;

  --color-chart-1: #6bb5ac;
  --color-chart-2: #4f8f87;

  --color-scene-1-front: #569189;
  --color-scene-1-side: #47786f;
  --color-scene-2-front: #3f726c;
  --color-scene-2-side: #345e59;
  --color-scene-floor-front: #0e0d0a;
  --color-scene-floor-side: #0b0a08;
  --color-hero-scrim: #171512e6;

  --color-success: #8cc488;
  --color-success-soft: #1d2e1c;
  --color-warning: #e2b65e;
  --color-warning-soft: #33290f;
  --color-danger: #f08a80;
  --color-danger-hover: #f4a49c;
  --color-danger-text: #2a0f0c;
  --color-danger-soft: #3a1e1b;
  --color-info: #93b6ec;
  --color-info-soft: #1b273c;

  --shadow-sm: 0 0 0 1px #ffffff0d;
  --shadow-md: 0 0 0 1px #ffffff10, 0 6px 16px -4px #0000004d;
  --shadow-lg: 0 0 0 1px #ffffff14, 0 18px 40px -12px #00000080;
  --shadow-glass: inset 0 1px 0 var(--color-glass-edge), 0 10px 28px -10px #00000080;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #171512;
    --color-surface: #1f1c18;
    --color-surface-raised: #29261f;
    --color-surface-sunken: #12100d;
    --color-surface-hover: #2d2a23;
    --color-text: #eeeae2;
    --color-text-muted: #aaa294;
    --color-border: #38332b;
    --color-border-strong: #857c6d;
    --color-overlay: #0a090799;

    --color-glass: #1f1c18b8;
    --color-glass-edge: #ffffff0f;
    --color-glass-border: #38332bcc;

    --color-accent: #6bb5ac;
    --color-accent-hover: #86c4bc;
    --color-accent-text: #0c1f1d;
    --color-accent-soft: #1c3431;
    --color-accent-soft-text: #a6d6cf;
    --color-focus: #86c4bc;

    --color-chart-1: #6bb5ac;
    --color-chart-2: #4f8f87;

    --color-scene-1-front: #569189;
    --color-scene-1-side: #47786f;
    --color-scene-2-front: #3f726c;
    --color-scene-2-side: #345e59;
    --color-scene-floor-front: #0e0d0a;
    --color-scene-floor-side: #0b0a08;
    --color-hero-scrim: #171512e6;

    --color-success: #8cc488;
    --color-success-soft: #1d2e1c;
    --color-warning: #e2b65e;
    --color-warning-soft: #33290f;
    --color-danger: #f08a80;
    --color-danger-hover: #f4a49c;
    --color-danger-text: #2a0f0c;
    --color-danger-soft: #3a1e1b;
    --color-info: #93b6ec;
    --color-info-soft: #1b273c;

    --shadow-sm: 0 0 0 1px #ffffff0d;
    --shadow-md: 0 0 0 1px #ffffff10, 0 6px 16px -4px #0000004d;
    --shadow-lg: 0 0 0 1px #ffffff14, 0 18px 40px -12px #00000080;
    --shadow-glass: inset 0 1px 0 var(--color-glass-edge), 0 10px 28px -10px #00000080;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-reveal: 0ms;
    --duration-scene: 0ms;
    --duration-hold: 0ms;
    --motion-press-scale: 1;
    --motion-rise: 0px;
    --motion-lift: 0px;
    --motion-dim: 1;
  }
}