/* ============================================================
   Ópticas CV+ — Design tokens
   ------------------------------------------------------------
   Colors and typography for the Ópticas CV+ brand.
   Derived from the visual identity: cyan primary, yellow accent,
   high-key white photography, heavy condensed display sans + a
   warm humanist body sans.
   ============================================================ */

/* --- Web fonts --- *
   Bebas Neue: Google Fonts (single weight 400, all-caps display).
   Montserrat: shipped locally from /fonts/ (uploaded brand files).
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Montserrat-Black.ttf') format('truetype'); }


:root {
  /* ------------------------------------------------------------
     COLOR — base palette
     Brand cyan ("CV cyan") and a warm yellow ("Sol") are the only
     two coloured accents. Everything else is high-key white +
     near-black ink.
     ------------------------------------------------------------ */

  /* ------------------------------------------------------------
     OFFICIAL BRAND PALETTE (Paleta Cromática)
     White · Tiffany Blue · Celadon Blue · Ripe Mango · Onyx
     ------------------------------------------------------------ */
  --brand-white:        #FFFFFF;            /* — */
  --brand-tiffany-blue: #00ABC8;            /* Pantone 3125C · SW6954 Resonant Blue */
  --brand-celadon-blue: #0083AD;            /* Pantone 7704C */
  --brand-ripe-mango:   #FFC629;            /* Pantone 123C  · SW6903 Cheerful */
  --brand-onyx:         #373A36;            /* Pantone 447C */

  /* CV cyan scale — anchored on Tiffany Blue (#00ABC8) and Celadon (#0083AD) */
  --cv-cyan-50:  #E5F6F9;
  --cv-cyan-100: #BCE8EF;
  --cv-cyan-200: #8DD8E2;
  --cv-cyan-300: #5DC7D5;
  --cv-cyan-400: #2EB8C9;
  --cv-cyan-500: #00ABC8;   /* Tiffany Blue — primary */
  --cv-cyan-600: #0099B8;   /* hover on light */
  --cv-cyan-700: #0083AD;   /* Celadon Blue — pressed / deep accent */
  --cv-cyan-800: #006A8A;
  --cv-cyan-900: #004D66;

  /* Sol yellow scale — anchored on Ripe Mango (#FFC629) */
  --sol-50:  #FFF8DC;
  --sol-100: #FFEDA8;
  --sol-200: #FFE17A;
  --sol-300: #FFD44E;
  --sol-400: #FFC629;       /* Ripe Mango — promo accent */
  --sol-500: #E5AE16;
  --sol-600: #B8870A;
  --sol-700: #8A6307;

  /* Ink — anchored on Onyx (#373A36) */
  --ink-900: #373A36;       /* Onyx — primary text */
  --ink-800: #45494E;       /* secondary headers */
  --ink-700: #595E64;       /* body */
  --ink-600: #6F747B;
  --ink-500: #8A8F95;       /* muted */
  --ink-400: #ADB1B6;
  --ink-300: #CED1D5;
  --ink-200: #E4E6E8;
  --ink-100: #F1F2F4;       /* hairline / divider */
  --ink-050: #F8F9FA;       /* surface alt */

  /* Surface */
  --surface:        #FFFFFF;
  --surface-alt:    #F8F9FA;
  --surface-cyan:   #E6F6FA; /* tinted band */
  --surface-yellow: #FFF7DD;

  /* ------------------------------------------------------------
     SEMANTIC
     ------------------------------------------------------------ */
  --color-bg:        var(--surface);
  --color-bg-alt:    var(--surface-alt);
  --color-fg:        var(--ink-900);
  --color-fg-muted:  var(--ink-500);
  --color-fg-soft:   var(--ink-700);
  --color-border:    var(--ink-200);
  --color-border-strong: var(--ink-300);

  --color-primary:        var(--cv-cyan-500);
  --color-primary-hover:  var(--cv-cyan-700);
  --color-primary-fg:     #FFFFFF;
  --color-accent:         var(--sol-400);
  --color-accent-fg:      var(--ink-900);

  --color-link:        var(--cv-cyan-700);
  --color-link-hover:  var(--cv-cyan-800);

  /* Status — strictly within the 5-colour brand palette.
     Keep palette closed: cyan = positive/neutral state, mango = warning,
     onyx = error/destructive. Never introduce green or red. */
  --color-success: var(--brand-tiffany-blue);   /* #00ABC8 */
  --color-warning: var(--brand-ripe-mango);     /* #FFC629 */
  --color-danger:  var(--brand-onyx);           /* #373A36 */

  /* ------------------------------------------------------------
     TYPE
     ------------------------------------------------------------ */
  --font-display: "Bebas Neue", "Oswald", "Anton", system-ui, sans-serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Display sizes — heavy condensed all-caps, brand voice */
  --fs-display-xl: clamp(64px, 9vw, 132px); /* hero billboard */
  --fs-display-l:  clamp(48px, 6vw, 88px);
  --fs-display-m:  clamp(40px, 4.5vw, 64px);
  --fs-display-s:  32px;

  /* Headings + body */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 0.92;
  --lh-snug:  1.1;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --ls-display: -0.01em;     /* condensed display tightens slightly */
  --ls-caps:    0.04em;      /* small all-caps eyebrow */

  /* ------------------------------------------------------------
     SPACING — 4px 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;

  /* ------------------------------------------------------------
     RADII — generously rounded pills + soft cards
     ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     ELEVATION — light, low-contrast retail shadows
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(31, 32, 36, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 32, 36, 0.07);
  --shadow-md: 0 6px 18px rgba(31, 32, 36, 0.08);
  --shadow-lg: 0 14px 40px rgba(31, 32, 36, 0.12);
  --shadow-cyan: 0 8px 24px rgba(0, 171, 200, 0.28);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1320px;
}

/* ============================================================
   Semantic helpers — drop-in classes
   ============================================================ */

body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-primary);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-l  { font-size: var(--fs-display-l); }
.display-m  { font-size: var(--fs-display-m); }
.display-s  { font-size: var(--fs-display-s); font-weight: 700; }

h1, .h1 { font-family: var(--font-body); font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-snug); color: var(--ink-900); }
h2, .h2 { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); color: var(--ink-900); }
h3, .h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); color: var(--ink-800); }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--ink-800); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--cv-cyan-700);
}

p, .p { font-size: var(--fs-md); color: var(--color-fg-soft); line-height: var(--lh-base); }
.muted { color: var(--color-fg-muted); }
small, .small { font-size: var(--fs-sm); }
.fineprint { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.45; }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }