/* ============================================================
   Roche Digital — product brand kit
   Photography, websites and software · Sunshine Coast QLD

   One file every Roche Digital product page, card, deck and tile
   links first. Tokens are copied 1:1 from the website's style.css
   (code/roche-digital/websites/roche-digital), which stays the source of truth:
   if the two ever disagree, the website wins and this file changes.

   The idiom: paper and ink. A warm paper page, near-black ink,
   one deep blue accent used sparingly. Fraunces for display with
   the emphasised word in italic, Inter for body, JetBrains Mono
   for spec-sheet labels. Hairline rules, white raised cards with
   soft shadows, ink pill buttons. When in doubt: less colour,
   more whitespace.
   ============================================================ */

/* --- Fonts (Google Fonts, no self-hosting needed) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* -- Colour · paper & ink ---------------------------------- */
  --paper:          #F7F6F3;   /* page base, warm, never pure white */
  --paper-raised:   #FFFFFF;   /* cards and insets only              */
  --paper-deep:     #EFEDE8;   /* a section fill one step down       */
  --ink:            #161513;   /* primary text, the dark surface     */
  --ink-2:          #5C5850;   /* secondary text                     */
  --ink-3:          #9A958A;   /* tertiary: labels, meta             */
  --hairline:       rgba(22, 21, 19, 0.10);
  --hairline-strong:rgba(22, 21, 19, 0.22);
  --hairline-on-ink:rgba(247, 246, 243, 0.16);

  /* -- Colour · the one accent (deep ink blue) --------------- */
  --accent:         #2733BE;
  --accent-dim:     rgba(39, 51, 190, 0.55);
  --accent-wash:    rgba(39, 51, 190, 0.07);

  /* -- Type · families ---------------------------------------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* -- Type · fluid scale ------------------------------------- */
  --text-hero:  clamp(2.85rem, 1.1rem + 7.4vw, 7rem);
  --text-h2:    clamp(2.1rem, 1rem + 4.4vw, 4.6rem);
  --text-pull:  clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  --text-lead:  clamp(1.1rem, 1rem + 0.55vw, 1.375rem);
  --text-body:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-small: 0.875rem;
  --text-label: 0.7rem;

  /* -- Display weight and tracking ---------------------------- */
  --display-weight: 460;
  --track-display: -0.015em;
  --track-label:   0.14em;

  /* -- Spacing scale ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;
  --section-pad: clamp(5rem, 4rem + 8vw, 11rem);

  /* -- Layout -------------------------------------------------- */
  --container-max: 84rem;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --nav-height: 4.25rem;
  --radius-card: 14px;
  --radius-pill: 100px;
  --shadow-card: 0 30px 70px -45px rgba(22, 21, 19, 0.55), 0 1px 2px rgba(22, 21, 19, 0.06);
  --shadow-soft: 0 12px 30px -20px rgba(22, 21, 19, 0.45), 0 1px 2px rgba(22, 21, 19, 0.05);

  /* -- Motion · easing & durations ----------------------------- */
  --ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.18, 1);
  --ease-hover:  cubic-bezier(0.34, 1.3, 0.5, 1);
  --dur-fast:  0.35s;
  --dur-mid:   0.7s;
  --dur-slow:  1.1s;
}

/* --- Base idiom -------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  font-feature-settings: "ss01" on, "cv05" on;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

/* Display type: Fraunces at a book weight, tight leading, the emphasised
   word in italic. The italic stays ink; the accent is not for headlines. */
.rd-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.rd-display em {
  font-style: italic;
  font-weight: calc(var(--display-weight) - 40);
  font-variation-settings: "SOFT" 60;
}

/* Mono spec-sheet label: `01 / THE IDEA` */
.rd-mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Kicker: accent dot then a mono label */
.rd-kicker { display: inline-flex; align-items: center; gap: 0.75em; color: var(--ink-2); }
.rd-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Hairline rule */
.rd-rule { display: block; height: 1px; background: var(--hairline-strong); border: 0; }

/* Ink pill button with the arrow that nudges */
.rd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.rd-btn:hover { background: #000; }
.rd-btn .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-hover); }
.rd-btn:hover .arrow { transform: translateX(4px); }

/* Ghost pill: hairline, no fill. For the second action beside an ink pill. */
.rd-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.rd-btn--ghost:hover { background: var(--paper-raised); }

/* Text link with the underline that draws in */
.rd-link { position: relative; padding-bottom: 2px; color: var(--ink-2); text-decoration: none; }
.rd-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-fast) var(--ease-inout); }
.rd-link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* Raised white card */
.rd-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* Oversized italic numeral, faint, for tiers and lists */
.rd-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 5rem;
  line-height: 1;
  color: rgba(22, 21, 19, 0.16);
}

/* The dark surface: one per page at most */
.rd-ink { background: var(--ink); color: var(--paper); }
.rd-ink .rd-display { color: var(--paper); }
.rd-ink .rd-mono { color: rgba(247, 246, 243, 0.55); }
.rd-ink .rd-rule { background: var(--hairline-on-ink); }

/* Wordmark: set in Fraunces, "Digital" in italic. The website sets it the same way. */
.rd-wordmark { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.rd-wordmark em { font-style: italic; font-weight: 400; }
.rd-ink .rd-wordmark { color: var(--paper); }