/*
 * Residencial San Ignacio - theme tokens (Radix Colors structure).
 *
 * Four 12-step scales derived from the "Paleta del parque" photo palette,
 * built with OKLCH on Radix reference curves (sand, grass, amber, lime).
 * Step roles (same for every scale, light and dark):
 *   1 app background        2 subtle background    3 element background
 *   4 hovered element       5 active element       6 subtle border
 *   7 border                8 strong border/focus  9 solid
 *   10 hovered solid        11 low-contrast text   12 high-contrast text
 *   --{scale}-contrast = text color on step 9.
 *
 * Artboards only use the semantic aliases at the bottom. Re-theme by
 * changing scale values; switch modes with data-theme="light|dark" on any
 * element, or let prefers-color-scheme decide.
 */

/* ---------- Light scales ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  /* Sand (neutral, warm cream with a green cast) */
  --sand-1: #F6F0DF;
  --sand-2: #F3ECD8;
  --sand-3: #EAE4CE;
  --sand-4: #E2DCC5;
  --sand-5: #D9D6BD;
  --sand-6: #D0CFB5;
  --sand-7: #C3C5AA;
  --sand-8: #AFB397;
  --sand-9: #717760;
  --sand-10: #646D58;
  --sand-11: #525E49;
  --sand-12: #0F1D0B;
  --sand-contrast: #FFFFFF;

  /* Forest (primary accent) */
  --forest-1: #FCFEFB;
  --forest-2: #F6FAF5;
  --forest-3: #ECF5E9;
  --forest-4: #E0EFDB;
  --forest-5: #D2E5CB;
  --forest-6: #C0D9B6;
  --forest-7: #A8C89D;
  --forest-8: #86B278;
  --forest-9: #2E5A1C;
  --forest-10: #234D0F;
  --forest-11: #385E29;
  --forest-12: #243220;
  --forest-contrast: #FFFFFF;

  /* Sun (gold, bright step 9 needs dark text) */
  --sun-1: #FEFDFB;
  --sun-2: #FDFBEB;
  --sun-3: #FCF8C8;
  --sun-4: #FAEFA6;
  --sun-5: #F5E786;
  --sun-6: #EDD880;
  --sun-7: #E3C36F;
  --sun-8: #DBA648;
  --sun-9: #E6C84F;
  --sun-10: #E0BA38;
  --sun-11: #906105;
  --sun-12: #4B3622;
  --sun-contrast: #0F1D0B;

  /* Lime (pale lime from backlit leaves) */
  --lime-1: #FAFBF7;
  --lime-2: #F2F4EB;
  --lime-3: #E4ECBA;
  --lime-4: #D5E38A;
  --lime-5: #C7D979;
  --lime-6: #B7CB6A;
  --lime-7: #A2BB57;
  --lime-8: #88A932;
  --lime-9: #C7EB5A;
  --lime-10: #BBE33F;
  --lime-11: #577300;
  --lime-12: #394010;
  --lime-contrast: #0F1D0B;

  /* Panel surface (Radix "color-panel"): raised cards. Lighter than step 1 in light, step 2 in dark */
  --sand-panel: #FFFCF3;
}

/* ---------- Dark scales ---------- */
/* Note: forest-9 is lighter in dark mode (with dark contrast text) because
   --accent is also used as link / numeral text on the dark page. */
[data-theme="dark"] {
  color-scheme: dark;
  /* Sand (neutral, warm cream with a green cast) */
  --sand-1: #111510;
  --sand-2: #181C17;
  --sand-3: #21261F;
  --sand-4: #282E26;
  --sand-5: #2F352C;
  --sand-6: #393E34;
  --sand-7: #474C40;
  --sand-8: #606556;
  --sand-9: #6C6F5E;
  --sand-10: #7C7C6A;
  --sand-11: #B7B4A0;
  --sand-12: #F4EEDB;
  --sand-contrast: #FFFFFF;

  /* Forest (primary accent) */
  --forest-1: #101511;
  --forest-2: #161A15;
  --forest-3: #1F291D;
  --forest-4: #263823;
  --forest-5: #30462C;
  --forest-6: #3A5435;
  --forest-7: #46643E;
  --forest-8: #527547;
  --forest-9: #79B15C;
  --forest-10: #86BF69;
  --forest-11: #9DCE8F;
  --forest-12: #D2EBC6;
  --forest-contrast: #111510;

  /* Sun (gold, bright step 9 needs dark text) */
  --sun-1: #15120D;
  --sun-2: #1C1810;
  --sun-3: #2D210B;
  --sun-4: #3B2905;
  --sun-5: #483307;
  --sun-6: #57400F;
  --sun-7: #6B5221;
  --sun-8: #88682D;
  --sun-9: #E6C84F;
  --sun-10: #EFD55C;
  --sun-11: #E9D347;
  --sun-12: #F5EAB9;
  --sun-contrast: #111510;

  /* Lime (pale lime from backlit leaves) */
  --lime-1: #11130A;
  --lime-2: #151A0E;
  --lime-3: #1F2912;
  --lime-4: #2A3716;
  --lime-5: #344419;
  --lime-6: #3E521E;
  --lime-7: #4B6222;
  --lime-8: #597524;
  --lime-9: #C7EB5A;
  --lime-10: #D9FE6C;
  --lime-11: #C4E44E;
  --lime-12: #E7F7B0;
  --lime-contrast: #111510;

  /* Panel surface (Radix "color-panel"): raised cards. Lighter than step 1 in light, step 2 in dark */
  --sand-panel: #181C17;
}

/* Dark mode is opt-in: set data-theme="dark" on <html> or any container.
   To follow the OS setting, restore the prefers-color-scheme block (see radix/theme.with-media.css). */

/* ---------- Semantic aliases (the only names artboards use) ----------
   Declared on every themed element so nested data-theme containers
   re-resolve them against their own scale values.
   on-dark-* are "on-inverse" tokens: they sit on --ink. Because the scale
   flips in dark mode (--ink becomes light, low steps become dark), mapping
   them to low sand steps keeps them readable in both modes. */
:root,
[data-theme] {
  --bg:             var(--sand-1); /* Page background (app background) */
  --ink:            var(--sand-12); /* Text, borders and inverse bands/cards */
  --accent:         var(--forest-9); /* Buttons, links, big numerals, progress fill */
  --on-accent:      var(--forest-contrast); /* Text on --accent */
  --sun:            var(--sun-9); /* Marker, stamps, offset shadows (fill only) */
  --lime:           var(--lime-4); /* Accent text on --ink (inverse) */
  --card:           var(--sand-panel); /* Cards, polaroids and inputs */
  --muted:          var(--sand-11); /* Secondary text */
  --muted-strong:   color-mix(in oklch, var(--sand-11), var(--sand-12)); /* Body text, halfway between steps 11 and 12 */
  --muted-faint:    var(--sand-9); /* Disabled / future items */
  --on-dark-muted:  var(--sand-7); /* Secondary text on --ink (inverse) */
  --on-dark-soft:   var(--sand-5); /* Body text on --ink (inverse) */
  --on-dark-faint:  var(--sand-3); /* Faint/brightest text on --ink (inverse) */
  --on-dark-soft-2: var(--sand-4); /* Alt body text on --ink (inverse) */
  --on-dark-soft-3: var(--sand-5); /* Alt body text on --ink (inverse) */
  --tape:           var(--sun-4); /* Paper tape fill */
  --tape-edge:      var(--sun-7); /* Paper tape border */
  --ph-a:           var(--sand-6); /* Photo placeholder hatch lines */
  --ph-b:           var(--sand-2); /* Photo placeholder base */
  --line-soft:      var(--sand-4); /* Progress track */
}

/* Dark-only alias overrides */
[data-theme="dark"] {
  --sun:  var(--sun-7); /* Deeper gold so light --ink text on the marker stays readable */
  --lime: var(--lime-7); /* Dark lime so it reads on the light inverse --ink */
}

/* ---------- Inverse "band" surface ----------
 * Big dark blocks (urgent notice, dark cards, CTA bands) carry class="band".
 * In light mode they use --ink as background (unchanged). In dark mode they would
 * otherwise invert to cream and lose weight, so here they become a deep forest
 * surface with light text, and cream cards nested inside keep their light look. */
[data-theme="dark"] .band {
  --ink: var(--forest-4);            /* band surface (#263823) + text on cream cards inside */
  --bg: var(--sand-12);              /* cream text on the band / cream cards inside */
  --card: #FFFCF3;                   /* cards nested in a band stay light */
  --accent: #2E5A1C;                 /* light-mode forest: labels/buttons read on cream text */
  --on-accent: #FFFFFF;
  --sun: var(--sun-9);               /* bright sun on the dark band */
  --lime: var(--lime-9);             /* bright lime accents on the dark band */
  --muted: #4D5A40;                  /* secondary text on cream cards inside the band */
  --muted-strong: #3B4630;
  --on-dark-muted: #B9C2A0;          /* secondary text directly on the band */
  --on-dark-soft: #D3D9C2;
  --on-dark-soft-2: #DADFCB;
  --on-dark-soft-3: #D6DBC6;
  --on-dark-faint: #E4E8D6;
  --tape: #EADCAE;
  --tape-edge: #CDBE8C;
  --line-soft: #E9E1C8;
}


/* ---------- No horizontal scroll ----------
 * Artboards have a fixed width; tilted cards, offset shadows and tape can poke
 * past the edge. Clip horizontally at the page level so no artboard ever shows
 * a horizontal scrollbar (vertical scrolling is unaffected). */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- Hidden scrollbars (boards are sized to their content) ---------- */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }