/* ============================================================
   LUCA SOPRANA — Design Tokens
   Colors, typography, spacing, radii, shadow, motion.
   Source: "A4 Brand Guidelines_interactive.pdf" (Nov 2025).
   ============================================================ */

@import url('./fonts/fonts.css');

:root {
  /* ---------- Primary palette ---------- */
  /* Signature — the brand's core anchor color, ink of movement plates */
  --ls-gun-powder: #171f24;         /* RGB 23 31 36   | CMYK 80 68 61 73 */
  /* Supporting — clean, light, premium neutral */
  --ls-light-grey: #9ca6a8;         /* RGB 156 166 168 | CMYK 42 28 30 0 */

  /* ---------- Secondary palette ---------- */
  --ls-blue-touareg: #2e4554;       /* RGB 46 69 84   | CMYK 84 64 48 36 */
  --ls-azurite:      #789199;       /* RGB 120 145 153 | CMYK 57 34 34 2 */

  /* ---------- Accent ---------- */
  --ls-clay:         #b8593d;       /* RGB 184 89 61  | CMYK 21 75 83 9 */

  /* ---------- Neutrals ---------- */
  --ls-black:        #000000;
  --ls-white:        #ffffff;

  /* Working whites — paper, dial cream, fog (derived) */
  --ls-paper:        #f4f5f5;       /* slightly warm paper, for print-feel surfaces */
  --ls-fog:          #dfe3e4;       /* soft dove between paper and light-grey */
  --ls-mist:         #c9cfd0;       /* hairline / muted rule */

  /* ---------- Semantic — foreground ---------- */
  --fg-1: var(--ls-gun-powder);     /* primary text, body, titles */
  --fg-2: var(--ls-blue-touareg);   /* secondary text, meta */
  --fg-3: var(--ls-azurite);        /* tertiary / caption / label */
  --fg-muted: var(--ls-light-grey); /* disabled / placeholder */
  --fg-on-dark: var(--ls-paper);    /* text on gun-powder surface */
  --fg-accent: var(--ls-clay);      /* limited accent — CTA / highlight only */

  /* ---------- Semantic — surface / background ---------- */
  --bg-base:    var(--ls-paper);
  --bg-surface: var(--ls-white);
  --bg-raised:  #ffffff;
  --bg-fog:     var(--ls-fog);
  --bg-deep:    var(--ls-gun-powder);        /* dark mode / hero surface */
  --bg-deep-2:  var(--ls-blue-touareg);      /* alt deep surface */

  /* ---------- Semantic — line / divider ---------- */
  --line-hairline: rgba(23, 31, 36, 0.12);   /* the brand's default rule */
  --line-strong:   rgba(23, 31, 36, 0.28);
  --line-on-dark:  rgba(244, 245, 245, 0.18);

  /* ---------- Typography — families ---------- */
  --font-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Butler', 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;

  /* ---------- Typography — tracking, leading ---------- */
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;    /* labels, eyebrows */
  --tracking-wider:     0.18em;    /* navigation, tags — the "watch dial" spacing */
  --tracking-widest:    0.32em;    /* payoff line, monogram clear-space text */

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-loose:   1.75;

  /* ---------- Type scale ----------
     Roboto is the workhorse; Butler is reserved for editorial pull-quotes
     and display moments where "stylistic contrast is required".         */
  --fs-12: 12px;  /* micro labels, payoff line */
  --fs-13: 13px;  /* captions, meta */
  --fs-14: 14px;  /* small body */
  --fs-16: 16px;  /* body */
  --fs-18: 18px;  /* body-large / lead */
  --fs-22: 22px;  /* h4 / subtitle */
  --fs-28: 28px;  /* h3 */
  --fs-40: 40px;  /* h2 */
  --fs-56: 56px;  /* h1 */
  --fs-80: 80px;  /* display */
  --fs-112: 112px; /* hero display */

  /* ---------- Spacing (8pt rhythm + watch-dial half-steps) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10:128px;

  /* ---------- Radii — minimal, hardware-informed ---------- */
  --radius-0: 0;        /* the default — the brand prefers sharp edges */
  --radius-1: 2px;      /* chips, inputs */
  --radius-2: 4px;      /* cards */
  --radius-pill: 999px; /* tag / circular badge only */

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--line-hairline);
  --border-rule:     1px solid var(--line-strong);

  /* ---------- Elevation — restrained, almost flat ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(23, 31, 36, 0.06);                        /* flush card */
  --shadow-2: 0 12px 32px -16px rgba(23, 31, 36, 0.22);              /* lifted card */
  --shadow-3: 0 24px 64px -24px rgba(23, 31, 36, 0.32);              /* modal, dial close-up */

  /* ---------- Motion — slow, mechanical ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);   /* most UI — calm */
  --ease-watch:    cubic-bezier(0.65, 0.0, 0.35, 1.0); /* escapement — deliberate */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-reveal: 800ms;
}

/* ============================================================
   Base semantic elements — uses tokens above.
   Include colors_and_type.css alone and these styles apply.
   ============================================================ */

html, body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 300;            /* Luca Soprana leads in Light */
  font-size: var(--fs-16);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -------- Headings — display cadence, Roboto Light + wide tracking -------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
h1, .h1 { font-size: var(--fs-80); }
h2, .h2 { font-size: var(--fs-56); }
h3, .h3 { font-size: var(--fs-40); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--fs-28); line-height: var(--leading-snug); }

/* Display variants — Butler for editorial pull-quotes */
.display-serif {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: var(--tracking-normal);
}
.display-serif--italic { font-style: italic; }

/* Eyebrow / dial-tag — the small uppercase label used everywhere on watches */
.eyebrow, .dial-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-3);
}

/* -------- Body / meta -------- */
p, .body {
  font-size: var(--fs-16);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  text-wrap: pretty;
  max-width: 68ch;
}
.body-lead { font-size: var(--fs-18); line-height: var(--leading-loose); color: var(--fg-2); }
.meta      { font-size: var(--fs-13); color: var(--fg-3); letter-spacing: 0.02em; }
.caption   { font-size: var(--fs-12); color: var(--fg-3); }

/* -------- Code / numerical / reference lines -------- */
code, .mono {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.94em;
  color: var(--fg-2);
}

/* -------- Links — underline on hover, no color shift -------- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }
a:active { opacity: 0.6; }

/* -------- Horizontal rules — the brand's signature hairline -------- */
hr { border: 0; height: 1px; background: var(--line-hairline); margin: var(--sp-6) 0; }

/* -------- Selection -------- */
::selection { background: var(--ls-clay); color: var(--ls-white); }