/* Sydak Living — tokens del sistema de diseño (contrato DOCS/02 §2–§4).
   Único archivo del theme donde se permiten valores hex. */

:root {
  /* ——— Marca global (fijos, §2.1) ——— */
  --sl-ink: #25221E;
  --sl-ink-soft: #49453F;
  --sl-paper: #F8F1E8;
  --sl-ivory: #F2E9E2;
  --sl-gold: #A48D66;
  --sl-gold-deep: #7B6030;
  --sl-gold-line: #D0BEA3;
  --sl-champagne: #C99E70;
  --sl-champagne-hi: #E3C9A5;
  --sl-bronze-900: #2B1F14;
  --sl-bronze-700: #4B311A;
  --sl-beam: #B48456;
  --sl-carbon: #181818;
  --sl-charcoal: #2A2924;
  --sl-line-light: #E2D6C6;
  --sl-line-dark: #3A322B;

  /* Fijos de componente (§5, §6.10, §6.22) — viven aquí porque fuera de
     tokens.css no se permiten valores de color literales. */
  --sl-footer-ink: #CEC5B9;
  --sl-emblem-bg: #16110B;
  --sl-emblem-line: #4C3A2C;
  --sl-vignette: rgb(20 12 6 / .22);

  /* ——— Semánticos de división — fallback: marca neutra (About, Contact, fichas, login) ——— */
  --div-bg: var(--sl-paper);
  --div-bg-deep: #EFE6D8;
  --div-surface: #FDF8F0;
  --div-ink: var(--sl-ink);
  --div-ink-soft: var(--sl-ink-soft);
  /* Solo display >=24px e iconos (§8); oscurecido desde --sl-gold (2.85:1)
     para dar >=3:1 sobre --sl-paper. */
  --div-accent: #947B49;
  --div-accent-strong: var(--sl-gold-deep);
  --div-accent-soft: var(--sl-gold-line);
  --div-line: var(--sl-line-light);
  --div-line-strong: #B4A488;
  --div-on-deep: var(--sl-ink);
  --div-focus: var(--sl-gold-deep);

  /* ——— Colores funcionales (§2.3) ——— */
  --color-status: #4E5B3A;
  --color-warning: var(--sl-gold-deep);
  --color-error: #7C2D12; /* las divisiones oscuras lo redefinen */

  /* ——— Tipografía (§3) ——— */
  --ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-text: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ff-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display-1: clamp(3rem, 1rem + 9vw, 6.5rem);
  --fs-display-2: clamp(2.25rem, 1rem + 5vw, 4rem);
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1.125rem;
  --fs-small: .9375rem;
  --fs-overline: .8125rem;
  --fs-label: .8125rem;
  --fs-nav: .875rem;
  --fs-button: .8125rem;
  --fs-price: clamp(1.75rem, 3vw, 2.25rem);

  --ls-caps-1: .08em;
  --ls-caps-2: .18em;
  --ls-caps-3: .28em;
  --ls-caps-4: .32em;

  /* ——— Espaciado (base 4px, §4) ——— */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 10vh, 8rem);
  --space-hero: clamp(6rem, 22vh, 12rem);

  /* ——— Contenedores ——— */
  --container-text: 42rem;
  --container-content: 70rem;
  --container-wide: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ——— Radios ——— */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ——— Sombras cálidas ——— */
  --shadow-1: 0 1px 2px rgb(40 26 12 / .08);
  --shadow-2: 0 12px 32px -16px rgb(40 26 12 / .28);
  --shadow-emboss: 0 1px 0 rgb(255 250 240 / .35), 0 -1px 0 rgb(40 26 12 / .18);

  /* ——— Movimiento ——— */
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-elegant: cubic-bezier(.16, 1, .3, 1);
}

/* En :root queda `normal` para que el color-scheme del body propague al viewport. */
body {
  color-scheme: light;
}

/* home — bronce splash: llegada ceremonial, champán sobre penumbra cálida
   (el gradiente hacia --sl-bronze-700 y el haz --sl-beam los pintan splash/hero). */
body[data-division="home"] {
  color-scheme: dark;
  --div-bg: var(--sl-bronze-900);
  --div-bg-deep: #221812;
  --div-surface: #3A2A1B;
  --div-ink: var(--sl-champagne-hi);
  --div-ink-soft: #C4A984;
  --div-accent: var(--sl-champagne);
  --div-accent-strong: var(--sl-champagne-hi);
  --div-accent-soft: #8A6A44;
  --div-line: #6A482B;
  --div-line-strong: #8A6A44;
  --div-on-deep: var(--sl-champagne-hi);
  --div-focus: var(--sl-champagne-hi);
  --color-status: #A8B58A;
  --color-warning: var(--sl-champagne);
  --color-error: #E0A188;
}

/* estates — Marfil Beige & Piedra Cálida: elegancia arquitectónica, riqueza serena. */
body[data-division="estates"] {
  --div-bg: #F2E9E2;
  --div-bg-deep: #E6D8CB;
  --div-surface: #F7F0E8;
  --div-ink: #44403B;
  --div-ink-soft: #6B655C;
  --div-accent: #8F6B2B;
  --div-accent-strong: #7A5A20;
  --div-accent-soft: #CEBB9E;
  --div-line: #DCCBB5;
  --div-line-strong: #B89F7D;
  --div-on-deep: #44403B;
  --div-focus: #7A5A20;
}

/* art — Marrón Chocolate & Oro Mate (oscura): profundidad artística, lujo creativo. */
body[data-division="art"] {
  color-scheme: dark;
  --div-bg: #2C2118;
  --div-bg-deep: #251C15;
  --div-surface: #332820;
  --div-ink: #C9BDAF;
  --div-ink-soft: #9C8E7E;
  --div-accent: #B5915F;
  --div-accent-strong: #C29D69;
  --div-accent-soft: #8E714A;
  --div-line: #5B4732;
  --div-line-strong: #7D6A55;
  --div-on-deep: #C9BDAF;
  --div-focus: #C29D69;
  --color-status: #A8B58A;
  --color-warning: var(--sl-champagne);
  --color-error: #E0A188;
}

/* art claro — sub-esquema opcional para lectura larga (bg-deep, ink-soft,
   line-strong, on-deep y focus derivados: la spec §2.2 no los fija). */
body[data-division="art"][data-scheme="light"] {
  color-scheme: light;
  --div-bg: #DCCAB6;
  --div-bg-deep: #D0BB9F;
  --div-surface: #E9DCCC;
  --div-ink: #4A3320;
  --div-ink-soft: #6B5138;
  --div-accent: #8A632A;
  --div-accent-strong: #6E4A1C;
  --div-accent-soft: #B89660;
  --div-line: #CBB69C;
  --div-line-strong: #A8906F;
  --div-on-deep: #4A3320;
  --div-focus: #6E4A1C;
  --color-status: #4E5B3A;
  --color-warning: var(--sl-gold-deep);
  --color-error: #7C2D12;
}

/* curated — Bronce Taupe & Arena Suave: estilo de vida sofisticado, elegancia discreta. */
body[data-division="curated"] {
  --div-bg: #C5B098;
  --div-bg-deep: #8D7B67;
  --div-surface: #BBAB95; /* aclarado: 5.5:1 con la tinta y 4.5:1 con accent-strong */
  --div-ink: #3E332B;
  --div-ink-soft: #4E3F2E; /* oscurecido: 4.8:1 sobre bg, 4.5:1 sobre surface */
  --div-accent: #6F4520;
  --div-accent-strong: #5C3A17;
  --div-accent-soft: #C6A97B;
  --div-line: #887662;
  --div-line-strong: #695743;
  --div-on-deep: #1B110A; /* 4.6:1 sobre bg-deep (overlay del nav) */
  --div-focus: #5C3A17;
}

/* private — Negro Carbón & Espresso Profundo: discreción, penumbra susurrada. */
body[data-division="private"] {
  color-scheme: dark;
  --div-bg: var(--sl-carbon);
  --div-bg-deep: #111111;
  --div-surface: #1E1B18;
  --div-ink: #B9B1A6;
  --div-ink-soft: #9C948B;
  --div-accent: #876144; /* solo el display gigante (§2.2) */
  --div-accent-strong: #C8A876;
  --div-accent-soft: #4E3D30;
  --div-line: #33302C;
  --div-line-strong: #5A5248;
  --div-on-deep: #B9B1A6;
  --div-focus: #C8A876;
  --color-status: #A8B58A;
  --color-warning: var(--sl-champagne);
  --color-error: #E0A188;
}