/* Bella Lora — design tokens.
   The page follows the light of the day: [data-hour] on <html> swaps the light tokens
   (mañana / tarde / atardecer). Everything else reads from these variables. */
:root {
  /* Neutral, luminous base (white, never cream) */
  --paper: #ffffff;
  --paper-2: #f4f6f5;
  --paper-3: #e9eeec;
  --line: rgba(14, 42, 48, .14);
  --line-strong: rgba(14, 42, 48, .32);

  /* Ink: deep sea */
  --ink: #0d262b;
  --ink-2: #3f5458;
  --ink-3: #5f7174;

  /* Materials taken from the club's own photos */
  --sea: #126a78;        /* deep water, AA on white */
  --sea-2: #2fa3ad;      /* shallow turquoise (decorative only) */
  --sand: #e8dfcf;       /* dry sand (decorative only) */
  --palm: #3d5b32;       /* cactus and palm green */
  --brand: #41bbb8;      /* the turtle of the logo (decorative / large only) */
  --sun-gold: #f2c230;   /* noon sun (decorative only) */
  --coral: #b4452f;      /* sunset coral, AA on white */

  /* Light of the day (default: mañana) */
  --light: #f7fbfb;            /* tint of the page surface */
  --glow: rgba(47, 163, 173, .16);
  --accent: var(--sea);
  --accent-ink: #ffffff;
  --sun: #f4d27a;
  --sun-y: 72%;                /* sun height on the horizon line */
  --grade: rgba(120, 196, 226, .30); /* colour grade laid over the hero footage */

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  --t-xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --t-2xl: clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem);
  --t-3xl: clamp(3rem, 1.2rem + 7vw, 8.5rem);

  /* Grid */
  --gutter: clamp(16px, 4vw, 64px);
  --col-gap: clamp(16px, 2vw, 32px);
  --max: 1440px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: clamp(56px, 7vw, 104px);
  --space-6: clamp(88px, 12vw, 184px);

  /* One easing curve for every reveal, like a slow swell */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur: .9s;
  --radius: 2px;
  --header-h: 72px;
}

html[data-hour="tarde"] {
  --light: #ffffff;
  --glow: rgba(242, 194, 48, .16);
  --accent: #2f6b34;
  --sun: #ffe08a;
  --sun-y: 18%;
  --grade: rgba(255, 226, 140, .22);
}

html[data-hour="atardecer"] {
  --light: #fff8f4;
  --glow: rgba(180, 69, 47, .16);
  --accent: var(--coral);
  --sun: #f19a62;
  --sun-y: 92%;
  --grade: rgba(255, 112, 54, .5);
}