@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Caveat:wght@400;600;700&display=swap");

:root {
  /* Color system */
  --color-ink: #1a1410;
  --color-ink-soft: #2e2318;
  --color-paper: #f5efe3;
  --color-paper-light: #fdf6ec;
  --color-paper-deep: #ede4d3;
  --color-paper-aged: #e8dcc8;
  --color-surface: #fffaf2;
  --color-primary: #e8547a;
  --color-primary-dark: #b93456;
  --color-primary-soft: #fce8ef;
  --color-secondary: #e8621a;
  --color-secondary-dark: #b84612;
  --color-secondary-soft: #fdecd8;
  --color-accent: #fff176;
  --color-accent-soft: #fef9c3;
  --color-coral: #f07050;
  --color-red: #c93030;
  --color-red-soft: #fbe8e8;
  --color-green-muted: #879e80;
  --color-green: #6f9b61;
  --color-green-dark: #3f6d36;
  --color-turquoise: #4f9f9a;
  --color-turquoise-dark: #2d6e69;
  --color-mauve: #b46a87;
  --color-border: #d4c4b0;
  --color-border-dark: #b8a898;
  --color-muted: #7a6555;
  --color-muted-strong: #4a3828;
  --color-white: #ffffff;
  --color-transparent: transparent;
  --color-shadow: rgb(26 20 16 / 14%);
  --color-shadow-strong: rgb(26 20 16 / 24%);
  --color-shadow-warm: rgb(232 84 122 / 12%);
  --color-paper-overlay: rgb(253 246 236 / 92%);
  --hero-overlay-opacity: 0.24;

  /* Highlight colors */
  --color-highlight-yellow: #fff176;
  --color-highlight-pink: #ffb3c8;
  --color-highlight-orange: #ffd09e;
  --color-sticky-yellow: #fef9c3;
  --color-sticky-pink: #fce7f3;
  --color-sticky-peach: #fff0e8;

  /* Gradients and marker-like patterns */
  --gradient-hero: linear-gradient(135deg, var(--color-paper-light), var(--color-paper) 54%, var(--color-primary-soft));
  --gradient-card-warm: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  --gradient-card-green: linear-gradient(145deg, var(--color-green), var(--color-accent));
  --gradient-card-ink: linear-gradient(145deg, var(--color-ink), var(--color-ink-soft));
  --gradient-cta: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
  --pattern-dots: radial-gradient(circle, var(--color-shadow) var(--pattern-dot-size), var(--color-transparent) var(--pattern-dot-size));
  --pattern-marker: repeating-linear-gradient(112deg, var(--color-transparent) 0 var(--marker-gap), var(--color-paper-overlay) var(--marker-gap) calc(var(--marker-gap) + var(--marker-stroke)), var(--color-transparent) calc(var(--marker-gap) + var(--marker-stroke)) calc(var(--marker-gap) * 2));

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", "Cascadia Code", Consolas, monospace;
  --font-hand: "Caveat", cursive;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.35rem;
  --font-size-xl: 1.85rem;
  --font-size-2xl: clamp(2rem, 4vw, 3.2rem);
  --font-size-hero: clamp(3.2rem, 8vw, 7.5rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 0.93;
  --line-height-heading: 1.08;
  --line-height-body: 1.72;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.14em;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;
  --section-space: clamp(var(--space-3xl), 9vw, var(--space-4xl));
  --page-gutter: clamp(var(--space-md), 4vw, var(--space-2xl));

  /* Layout */
  --content-width: 76rem;
  --content-width-wide: 90rem;
  --content-width-narrow: 48rem;
  --grid-min-card: 16rem;
  --grid-min-feature: 20rem;
  --hero-min-height: 42rem;
  --header-min-height: 4.5rem;
  --card-media-height: 19rem;
  --cover-card-height: 34rem;
  --character-size: 13rem;
  --icon-size: 2.75rem;
  --pattern-size: 1.25rem 1.25rem;
  --pattern-dot-size: 0.08rem;
  --marker-gap: 2.5rem;
  --marker-stroke: 0.2rem;

  /* Borders */
  --border-thin: 0.0625rem;
  --border-medium: 0.125rem;
  --border-bold: 0.2rem;
  --border-ink: var(--border-medium) solid var(--color-ink);
  --border-paper: var(--border-medium) solid var(--color-paper);
  --border-soft: var(--border-thin) solid var(--color-border);
  --radius-sm: 0.3rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1.5rem;
  --radius-pill: 99rem;
  --radius-circle: 50%;

  /* Effects */
  --shadow-sm: 0.25rem 0.25rem 0 var(--color-ink);
  --shadow-md: 0.4rem 0.4rem 0 var(--color-ink);
  --shadow-soft: 0 1rem 2.5rem var(--color-shadow);
  --shadow-float: 0 1.5rem 3.5rem var(--color-shadow-strong);
  --rotation-left: -2deg;
  --rotation-right: 2deg;
  --transition-fast: 150ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --lift-distance: -0.25rem;

  /* Components */
  --button-height: 3.35rem;
  --button-padding: 0 var(--space-xl);
  --tag-padding: var(--space-xs) var(--space-md);
  --card-padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  --nav-gap: clamp(var(--space-md), 3vw, var(--space-xl));
  --section-header-gap: var(--space-md);
  --z-header: 100;
  --z-content: 2;

  /* Short aliases used by this design pack */
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --paper: var(--color-paper);
  --paper-warm: var(--color-paper-light);
  --paper-light: var(--color-paper-light);
  --paper-dark: var(--color-paper-deep);
  --paper-deep: var(--color-paper-deep);
  --paper-aged: var(--color-paper-aged);
  --rose: var(--color-primary);
  --rose-soft: var(--color-primary-soft);
  --rose-mid: #f0a0b8;
  --orange: var(--color-secondary);
  --orange-soft: var(--color-secondary-soft);
  --orange-mid: #f4a96a;
  --orange-dark: var(--color-secondary-dark);
  --red: var(--color-red);
  --red-soft: var(--color-red-soft);
  --coral: var(--color-coral);
  --highlight-yellow: var(--color-highlight-yellow);
  --highlight-pink: var(--color-highlight-pink);
  --highlight-orange: var(--color-highlight-orange);
  --sticky-yellow: var(--color-sticky-yellow);
  --sticky-pink: var(--color-sticky-pink);
  --sticky-peach: var(--color-sticky-peach);
  --signal: var(--color-primary);
  --green: var(--color-green);
  --blue-note: var(--color-turquoise);
  --blue-note-dark: var(--color-turquoise-dark);
  --violet: var(--color-mauve);
  --cyan: var(--color-turquoise);
  --line: var(--color-border);
  --line-dark: var(--color-border-dark);
  --muted: var(--color-muted);
  --muted-strong: var(--color-muted-strong);
  --white: var(--color-white);
  --transparent: var(--color-transparent);
  --shadow: var(--color-shadow);
  --shadow-ink: var(--color-shadow);
  --shadow-warm: var(--color-shadow-warm);
  --shadow-strong: var(--color-shadow-strong);
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-md: var(--font-size-md);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  --text-hero: var(--font-size-hero);
  --sp-2xs: var(--space-2xs);
  --sp-xs: var(--space-xs);
  --sp-sm: var(--space-sm);
  --sp-md: var(--space-md);
  --sp-lg: var(--space-lg);
  --sp-xl: var(--space-xl);
  --sp-2xl: var(--space-2xl);
  --sp-3xl: var(--space-3xl);
  --sp-4xl: var(--space-4xl);
  --section-gap: var(--section-space);
  --gutter: var(--page-gutter);
  --max-w: var(--content-width);
  --max-w-wide: var(--content-width-wide);
  --max-w-narrow: var(--content-width-narrow);
  --content: var(--content-width);
  --content-wide: var(--content-width-wide);
  --header-height: var(--header-min-height);
  --border: var(--border-thin) solid var(--line);
  --border-line: var(--border-thin) solid var(--line);
  --shadow-hard: var(--shadow-md);
  --ease-fast: var(--transition-fast);
  --ease-base: var(--transition-base);
  --ease-slow: var(--transition-slow);
}