/* Shared design tokens for both the standard site pages and the designer app. */

:root {
  /* raw brand tokens */
  --brand-stone: #6b6157;
  --brand-sand: #c9bfb0;
  --brand-gold: #b89a5e;
  --brand-gold-light: #d4b97a;
  --brand-white: #fdf9f4;

  /* shared aliases */
  --stone: var(--brand-stone);
  --sand: var(--brand-sand);
  --gold: var(--brand-gold);
  --gold-lt: var(--brand-gold-light);
  --white: var(--brand-white);

  /* shared surfaces */
  --ink: #1a1714;
  --warm: #2e2820;
  --cream: #f5f0e8;
  --ink-1: #13100d;
  --ink-2: #16120f;
  --ink-3: #191512;
  --ink-4: #1c1915;
  --ink-5: #201c18;
  --surface-1: var(--ink-1);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --surface-4: var(--ink-4);
  --surface-5: var(--ink-5);

  /* typography */
  --paragraph-scale: 1.25;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Jost', sans-serif;
  --font-body: var(--font-sans);
  --display-letter-spacing: 0.02em;
  --display-line-height: 1.16;
  --display-weight: 300;
  --display-size-section: 2rem;
  --display-size-hero: clamp(3.2rem, 7vw, 6.2rem);
  --section-heading-prominent-size: clamp(2.2rem, 4.3vw, 3.2rem);

  /* semantic color tokens */
  --color-accent: var(--gold);
  --color-accent-soft: var(--gold-lt);
  --color-text-on-dark: var(--white);
  --color-text-muted-on-dark: var(--sand);
  --color-text-supporting-on-dark: #aaa091;
  --color-surface-dark: var(--ink);
  --color-ui-muted-on-dark: var(--stone);
  --color-border-soft: rgba(184, 154, 94, 0.15);
  --color-divider-line: rgba(184, 154, 94, 0.25);
  --color-panel-border: rgba(184, 154, 94, 0.25);
  --color-panel-surface: rgba(26, 23, 20, 0.5);
  --color-panel-surface-hover: rgba(26, 23, 20, 0.8);
  --color-media-divider: rgba(255, 255, 255, 0.05);
  --color-issue-mark: rgba(107, 97, 87, 0.5);

  /* spacing */
  --space-flow-default: 1rem;
  --space-flow-heading: 1.25rem;
  --space-flow-list: 1.2rem;
  --space-column-list: 1rem;
  --space-column-field: 0.55rem;

  /* shared fields and buttons */
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: rgba(201, 191, 176, 0.15);
  --field-border-focus: rgba(184, 154, 94, 0.82);
  --field-placeholder: rgba(201, 191, 176, 0.3);

  --cta-bg: var(--color-accent);
  --cta-bg-hover: var(--color-accent-soft);
  --cta-text: #141210;
  --cta-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);

  --btn-standard-bg: rgba(26, 23, 20, 0.82);
  --btn-standard-bg-hover: rgba(26, 23, 20, 0.94);
  --btn-standard-text: var(--color-accent-soft);
  --btn-standard-border: rgba(184, 154, 94, 0.62);
  --btn-standard-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  --btn-standard-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.34);

  --media-link-border: rgba(184, 154, 94, 0.28);
  --media-link-border-hover: rgba(184, 154, 94, 0.62);
  --media-link-overlay: linear-gradient(to top, rgba(19, 16, 13, 0.78) 0%, rgba(19, 16, 13, 0.1) 45%, transparent 70%);

  /* site page effects */
  --hero-bg-base: linear-gradient(160deg, #0e0c0a 0%, #1a1714 50%, #221e18 100%);
  --hero-bg-glow-primary: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(184, 154, 94, 0.08) 0%, transparent 60%);
  --hero-bg-glow-secondary: radial-gradient(ellipse 50% 80% at 20% 70%, rgba(107, 97, 87, 0.15) 0%, transparent 55%);

  /* designer-specific shared values */
  --border: rgba(201, 191, 176, 0.22);
}