/* CARE 3D design tokens — THE ONLY FILE WHERE COLORS, FONTS AND SIZES ARE DEFINED.
 *
 * Values come from the CARE 3D brand kit, edition 1.4 [Gokazu/care-3d-brand-kit, developer/web/care-3d.css].
 * The palette, the role of each color in light and dark, the fonts, the radius and the type sizes are the
 * kit's. The token NAMES are this site's; each one says which kit token it carries.
 *
 * Kit rules this file follows:
 *   Light: White ground, Quartz raised surface (no outline), Camera Black text, Chocolate muted text.
 *   Dark: Espresso ground, Chocolate raised surface, White text, Quartz muted text.
 *   Buttons: Camera Black with a White label on light; Gold with a Camera Black label on dark.
 *   Warm Granite, Gold and Copper are never grounds for text.
 * This site is stricter than the kit in two places: text never below 16px (kit floor: 12px) and body
 * text at 7:1 or better (kit: 4.5:1). tools/guard.mjs measures both.
 *
 * Two modes, same token names [Yendi 2026-09-18: "queremos light and dark modes"].
 * Light is :root. Dark applies when the visitor's system is dark and they have not chosen
 * light, or when they chose dark with the toggle (data-theme set by src/scripts/theme.js).
 */

:root {
  color-scheme: light;

  /* The palette, by name. Use the role tokens below in CSS, not these. */
  --brand-camera-black: #0F0E0F;
  --brand-espresso: #221617;
  --brand-chocolate: #3B2E2C;
  --brand-copper: #A9785E;
  --brand-gold: #CEB166;
  --brand-warm-gray: #BEBAB0;        /* the kit calls it Warm Granite */
  --brand-warm-granite-60: #D8D6D0;  /* kit tint, a fill for shapes */
  --brand-quartz: #F5F4F2;
  --brand-white: #FFFFFF;
  --brand-light-bottom: #ECEAE6;      /* kit light gradient, bottom stop */
  --brand-copper-glow-top: #442E29;   /* kit Copper Glow, top stop */
  --brand-mocha-bottom: #342726;      /* kit Mocha, bottom stop */

  /* Surfaces and text */
  --color-bg: var(--brand-white);             /* kit bg */
  --color-surface: var(--brand-quartz);       /* kit bg-raised: cards and bands, no outline */
  --color-text: var(--brand-camera-black);    /* kit text, 19.27:1 on White */
  --color-text-muted: var(--brand-chocolate); /* kit text-muted, 13.02:1 on White */
  --color-border: var(--brand-warm-gray);     /* kit border */
  --color-shape: var(--brand-warm-granite-60); /* filled shapes that carry no text: the map's land */

  /* Gradients always run top to bottom, light to dark [Rafa 2026-10-07; brand kit 1.4, Gradients]. */
  --surface-featured: linear-gradient(180deg, var(--brand-white), var(--brand-light-bottom) 32%);  /* kit light gradient */
  --surface-hover: linear-gradient(180deg, var(--brand-white), var(--brand-light-bottom) 32%);
  --surface-chosen: linear-gradient(180deg, var(--brand-chocolate), var(--brand-mocha-bottom));   /* kit Mocha, White text: the chosen card in a set */
  --color-chosen: var(--brand-chocolate);   /* the solid colour under that gradient */
  /* Footer in light mode: the kit's light gradient turned over, #ECEAE6 at the top edge fading to White at the bottom, so the
   * footer starts with a clear edge [Yendi 2026-10-13: 'I like the clear top edge, yes, flip the light version']. This departs
   * from the kit's rule 'Always vertical, lighter at the top' (brand kit, Gradients); dark mode follows the rule. */
  --surface-footer: linear-gradient(0deg, var(--brand-white), var(--brand-light-bottom) 32%);
  --color-footer: var(--brand-light-bottom);
  /* A selected control is never Camera Black on light nor White on dark [Yendi 2026-10-07]. */
  --color-selected: var(--brand-chocolate);
  --color-selected-text: var(--brand-white);
  --color-mark: color-mix(in srgb, var(--brand-gold) 45%, transparent);  /* highlighted phrase in a quote */
  --color-quote-mark: var(--brand-copper);                               /* the large opening quote mark */

  /* Actions */
  --color-button: var(--brand-camera-black);  /* kit button */
  --color-button-text: var(--brand-white);    /* kit on-button */
  --color-button-hover-text: var(--brand-gold); /* kit button-hover-label */
  --color-accent: var(--brand-gold);          /* kit highlight: badges, the ring on buttons. Gold is rare. */
  --color-rule: var(--brand-copper);          /* horizontal and vertical lines are Copper on light [brand kit, Palette; Rafa 2026-10-07 and 2026-10-22, gap 18]. Table dividers are not decided and keep --color-border. */
  --color-accent-text: var(--brand-camera-black); /* kit on-accent */
  --color-link: var(--brand-chocolate);       /* kit link */
  --color-link-text: var(--brand-copper);     /* links inside running text: bold, underlined. Bold Copper on White is 3.8:1, accepted [Rafa 2026-10-22, relayed by the brand kit session] */
  --color-link-visited: var(--brand-chocolate); /* visited links in running text, bold, underlined [Rafa 2026-10-22] */
  --color-focus: var(--brand-copper);         /* focus ring: Copper on light [Rafa 2026-10-22, brand kit gap 12] */

  /* Type: Care Display for headings, DM Sans for text [brand kit 1.4]. Care Display is never tracked. */
  --font-body: 'DM Sans', "Helvetica Neue", Arial, sans-serif;
  --font-heading: 'Care Display', Georgia, serif;
  --heading-stretch: normal;
  --heading-weight: 700;

  /* Type scale. Body never below 16px. */
  --text-body: 1rem;
  --text-lead: 1.25rem;         /* kit lead is 20px */
  --text-label: 0.75rem;        /* kit label: 12px capitals, the one size under the site's 16px floor [Yendi 2026-10-07] */
  --label-tracking: 1px;        /* kit label tracking */
  --text-small: 1rem;           /* kept at 16px on purpose; the guard fails anything smaller */
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* kit h3 is 28px */
  --text-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-h1: clamp(2rem, 1.4rem + 3vw, 3rem);           /* kit h1 is 48px */
  --text-display: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);  /* kit display is 64px: the one largest line on a page */
  --leading-body: 1.5;

  /* Space and shape */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius: 12px;               /* kit radius-md: raised surfaces */
  --radius-sm: 6px;             /* kit radius-sm: buttons */
  --radius-full: 9999px;        /* kit radius-full: pills */
  --measure: 68ch;
  --page-max: 1200px;
  --hero-film-scroll: 540vh;   /* film 415vh, then the end holds 125vh while the plan sharpens and furnishes (hero-film.js MOVE) */
  --header-h: 88px;             /* sticky header height; the pinned film sits under it. Logo 44px + its clear space above and below */
  --logo-clear: 22px;           /* kit, Lockup: clear space x = half the camera's height, on all four sides (logo is 44px tall) */
  --photo-edge: linear-gradient(0deg, rgb(34 22 23 / 0.92) 0%, rgb(34 22 23 / 0.5) 24%, rgb(34 22 23 / 0) 50%);  /* kit, Logos on photos (guide p. 14): Espresso edge gradient, bottom edge only, darkest at the bottom, clear by about half the height, only as dark as the text or logo on it needs to pass 4.5:1. The kit fixes no opacity [Rafa, relayed by the brand kit session 2026-10-14]; 0.92 is this site's value, not yet measured against that rule. */
  --beat-width: 30rem;
  --frost-opacity: 62%;         /* hero cards over the film: how much of the page colour stays */
  --frost-blur: 18px;
  --logo-h: 1.75rem;
  --drawing-filter: none;       /* line drawings are black on transparent; dark mode inverts them */
  --text-price: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);  /* package prices: the number the eye lands on */             /* brokerage logo height in the proof band */

  /* Sari chat widget reads these (my.gokazu.com/sari/v1.js). Keep them mapped to the tokens above. */
  --sari-acento: var(--color-accent);
  --sari-acento-texto: var(--color-accent-text);
  --sari-fondo: var(--color-bg);
  --sari-texto: var(--color-text);
  --sari-borde: var(--color-border);
  --sari-fuente: var(--font-body);
  --sari-fuente-titulo: var(--font-heading);
  --sari-radio: var(--radius);
}

/* Dark mode [brand kit 1.4]: Espresso is the page and Chocolate the raised surface. Quartz muted text
 * is 15.9:1 on Espresso and 12.0:1 on Chocolate. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--brand-espresso);
  --color-surface: var(--brand-chocolate);
  --color-text: var(--brand-white);
  --color-text-muted: var(--brand-quartz);
  --color-border: var(--brand-chocolate);
  --color-shape: var(--brand-chocolate);
  --color-button: var(--brand-gold);
  --color-button-text: var(--brand-camera-black);
  --color-button-hover-text: var(--brand-camera-black);
  --color-accent: var(--brand-gold);
  --color-accent-text: var(--brand-camera-black);
  --color-link: var(--brand-gold);
  --color-link-text: var(--brand-gold);     /* [Rafa 2026-10-22] */
  --color-link-visited: var(--brand-copper); /* [Rafa 2026-10-22] */
  --color-rule: var(--brand-gold);          /* lines are Gold on dark [Rafa 2026-10-22, brand kit gap 18] */
  --color-focus: var(--brand-gold);
  --surface-featured: linear-gradient(180deg, var(--brand-chocolate), var(--brand-mocha-bottom));   /* kit Mocha: raised surfaces on dark */
  --surface-hover: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));    /* kit Copper Glow */
  --surface-chosen: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));   /* kit Copper Glow [Yendi 2026-10-07] */
  --color-chosen: var(--brand-copper-glow-top);
  --surface-footer: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));   /* kit Copper Glow [Yendi 2026-10-13: 'copper glow for the dark mode footer'] */
  --color-footer: var(--brand-espresso);
  --color-selected: var(--brand-gold);
  --color-selected-text: var(--brand-camera-black);
  --color-mark: var(--brand-chocolate);
  --color-quote-mark: var(--brand-gold);
  --frost-opacity: 76%;         /* dark cards sit over the white floor plan too; denser frost keeps 7:1 */
  --drawing-filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--brand-espresso);
    --color-surface: var(--brand-chocolate);
    --color-text: var(--brand-white);
    --color-text-muted: var(--brand-quartz);
    --color-border: var(--brand-chocolate);
    --color-shape: var(--brand-chocolate);
    --color-button: var(--brand-gold);
    --color-button-text: var(--brand-camera-black);
    --color-button-hover-text: var(--brand-camera-black);
    --color-accent: var(--brand-gold);
    --color-accent-text: var(--brand-camera-black);
    --color-link: var(--brand-gold);
    --color-link-text: var(--brand-gold);     /* [Rafa 2026-10-22] */
    --color-link-visited: var(--brand-copper); /* [Rafa 2026-10-22] */
    --color-rule: var(--brand-gold);          /* lines are Gold on dark [Rafa 2026-10-22, brand kit gap 18] */
    --color-focus: var(--brand-gold);
    --surface-featured: linear-gradient(180deg, var(--brand-chocolate), var(--brand-mocha-bottom));   /* kit Mocha: raised surfaces on dark */
    --surface-hover: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));    /* kit Copper Glow */
    --surface-chosen: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));   /* kit Copper Glow [Yendi 2026-10-07] */
    --color-chosen: var(--brand-copper-glow-top);
    --surface-footer: linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso));
    --color-footer: var(--brand-espresso);
    --color-selected: var(--brand-gold);
    --color-selected-text: var(--brand-camera-black);
    --color-mark: var(--brand-chocolate);
    --color-quote-mark: var(--brand-gold);
    --frost-opacity: 76%;
    --drawing-filter: invert(1);
  }
}