/* ============================================================
   DREAMLINK — Design System Tokens
   colors_and_type.css
   ------------------------------------------------------------
   Source of truth for color + type. Import this first; build
   semantic tokens (component-level) on top.
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutes — see fonts/README.md) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;1,6..96,400&family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Gowun+Batang:wght@400;700&family=Shippori+Mincho:wght@400;500;700&family=Noto+Serif+Sinhala:wght@400;500;600;700&family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap');

/* ============================================================
   LICENSED FONTS — install here
   ------------------------------------------------------------
   Drop .woff2 files into /fonts/ and uncomment the blocks below.
   The font-family names match the real font names that already
   sit first in every stack — uncomment-and-go.
   See fonts/README.md for licensing notes.
   ============================================================ */

/*
@font-face {
  font-family: 'Sabon';
  src: url('fonts/Sabon-Roman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sabon';
  src: url('fonts/Sabon-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sabon';
  src: url('fonts/Sabon-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Bodoni 72 Oldstyle';
  src: url('fonts/Bodoni72Oldstyle-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bodoni 72 Oldstyle';
  src: url('fonts/Bodoni72Oldstyle-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bodoni 72 Oldstyle';
  src: url('fonts/Bodoni72Oldstyle-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Thin.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Sinhala MN';
  src: url('fonts/SinhalaMN-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

:root {
  /* ============================================================
     COLOR — Officiel Couleur (brown neutrals), Font Couleur,
     Point Couleur (heritage red)
     ============================================================ */

  /* Brown neutral palette — "elegant, sophisticated, cultural adaptive" */
  --color-brown-900: #4D3C3A;   /* deepest cocoa */
  --color-brown-700: #6F5C53;   /* mid taupe */
  --color-brown-500: #837872;   /* warm stone */

  /* Off-palette helpers derived from brown system (tints/shades) */
  --color-brown-300: #B8ADA6;
  --color-brown-100: #E8E2DC;
  --color-cream:     #F6F1EA;   /* paper / off-white surface */
  --color-bone:      #EFE9E0;   /* slightly warmer cream */

  /* Font color system — monochromatic */
  --color-ink:       #262626;   /* softened matte black */
  --color-paper:     #FFFFFF;   /* pure white */

  /* Point color — heritage / seal / accent only */
  --color-oxblood:   #550002;   /* deep traditional red */
  --color-oxblood-tint: #7A1A1C;
  --color-oxblood-deep: #3A0001;

  /* ---------- Semantic color tokens ---------- */
  --fg-1: var(--color-ink);             /* primary text */
  --fg-2: var(--color-brown-700);       /* secondary text */
  --fg-3: var(--color-brown-500);       /* tertiary / captions */
  --fg-muted: var(--color-brown-300);   /* dividers, very low emphasis */
  --fg-inverse: var(--color-paper);     /* text on dark surfaces */

  --bg-1: var(--color-paper);           /* primary canvas */
  --bg-2: var(--color-cream);           /* warm secondary surface */
  --bg-3: var(--color-bone);            /* tertiary / cards on cream */
  --bg-inverse: var(--color-ink);       /* dark canvas */
  --bg-deep: #1A1413;                   /* near-black with brown undertone */

  --accent: var(--color-oxblood);       /* heritage point color */
  --accent-fg: var(--color-paper);

  --border-subtle: rgba(38, 38, 38, 0.08);
  --border-default: rgba(38, 38, 38, 0.15);
  --border-strong: rgba(38, 38, 38, 0.28);
  --border-inverse: rgba(255, 255, 255, 0.18);

  /* ============================================================
     TYPE — Multi-script editorial system
     ============================================================ */

  /* Raw font stacks ---------------------------------------------------- */

  /* Brandmark / wordmark — Sinhala MN is logo-exclusive, Apple system
     font. We substitute Noto Serif Sinhala (free, Google Fonts) which
     covers both the Latin glyphs Dreamlink uses for the wordmark AND
     the Sinhala script if it's ever needed in a brand asset. Cinzel
     stays as a tertiary fallback for the all-caps inscribed gesture. */
  --font-brandmark: 'Sinhala MN', 'Noto Serif Sinhala', 'Cinzel', 'Trajan Pro', serif;

  /* H1 · Hero & Formal Headers — Sabon (no free equivalent) → EB Garamond */
  --font-hero: 'EB Garamond', 'Sabon', 'Sabon LT Std', Georgia, serif;

  /* H2 · Editorial Headers — Bodoni 72 Oldstyle → Bodoni Moda */
  --font-editorial: 'Bodoni Moda', 'Bodoni 72 Oldstyle', 'Bodoni 72', 'Didot', serif;

  /* H3 · Sub-Headers (accent serif) — Cormorant Garamond (avail on G-Fonts) */
  --font-accent-serif: 'Cormorant Garamond', 'Garamond', serif;

  /* H4 · Sub-Headers Sans / Primary Sans — Helvetica Neue */
  --font-sans-primary: 'Helvetica Neue', 'Helvetica', 'Inter', system-ui, -apple-system, sans-serif;

  /* Body — Helvetica Neue Thin */
  --font-body: 'Helvetica Neue', 'Helvetica', 'Inter', system-ui, -apple-system, sans-serif;

  /* Captions · UI · Digital — Inter */
  --font-ui: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  /* Korean — Gowun Batang (serif) / Spoqa Hans Neo (sans) */
  --font-ko-serif: 'Gowun Batang', 'Apple SD Gothic Neo', 'Noto Serif KR', serif;
  --font-ko-sans:  'Spoqa Han Sans Neo', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* Japanese — Shippori Mincho (serif) / Spoqa Hans Neo (sans) */
  --font-jp-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-jp-sans:  'Spoqa Han Sans Neo', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  /* ---------- Semantic type tokens ---------- */

  /* Display — single-line hero on covers, posters */
  --type-display-family: var(--font-hero);
  --type-display-size: clamp(56px, 8vw, 120px);
  --type-display-weight: 400;
  --type-display-leading: 1.02;
  --type-display-tracking: -0.01em;

  /* H1 — section opener */
  --type-h1-family: var(--font-hero);
  --type-h1-size: clamp(40px, 5vw, 72px);
  --type-h1-weight: 400;
  --type-h1-leading: 1.08;
  --type-h1-tracking: -0.005em;

  /* H2 — editorial */
  --type-h2-family: var(--font-editorial);
  --type-h2-size: clamp(32px, 3.6vw, 52px);
  --type-h2-weight: 400;
  --type-h2-leading: 1.12;
  --type-h2-tracking: 0;

  /* H3 — accent / supplemental */
  --type-h3-family: var(--font-accent-serif);
  --type-h3-size: clamp(24px, 2.4vw, 36px);
  --type-h3-weight: 500;
  --type-h3-leading: 1.2;
  --type-h3-tracking: 0;

  /* H4 — sans sub-header */
  --type-h4-family: var(--font-sans-primary);
  --type-h4-size: 18px;
  --type-h4-weight: 700;
  --type-h4-leading: 1.3;
  --type-h4-tracking: 0.16em;        /* uppercase eyebrow style */
  --type-h4-transform: uppercase;

  /* Body */
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-weight: 300;            /* Helvetica Neue Thin */
  --type-body-leading: 1.6;
  --type-body-tracking: 0;

  --type-body-lg-size: 19px;
  --type-body-sm-size: 14px;

  /* Caption / UI / metadata */
  --type-caption-family: var(--font-ui);
  --type-caption-size: 12px;
  --type-caption-weight: 500;
  --type-caption-leading: 1.4;
  --type-caption-tracking: 0.08em;
  --type-caption-transform: uppercase;

  /* Eyebrow — small all-caps label above headings */
  --type-eyebrow-family: var(--font-ui);
  --type-eyebrow-size: 11px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-leading: 1.2;
  --type-eyebrow-tracking: 0.22em;

  /* ============================================================
     SPACING — 4px base, golden-ratio-ish editorial scale
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ============================================================
     RADII — restrained. Editorial brand uses sharp corners.
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 1px;          /* hairline rounding only */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;      /* used sparingly, for tags */

  /* ============================================================
     SHADOWS — almost imperceptible. Editorial = depth from
     contrast & whitespace, not drop shadows.
     ============================================================ */
  --shadow-none: none;
  --shadow-paper: 0 1px 0 rgba(38, 38, 38, 0.04), 0 8px 24px rgba(38, 38, 38, 0.04);
  --shadow-lift: 0 1px 2px rgba(38, 38, 38, 0.06), 0 24px 48px -16px rgba(38, 38, 38, 0.12);
  --shadow-seal: 0 0 0 1px rgba(85, 0, 2, 0.15), 0 16px 32px -12px rgba(85, 0, 2, 0.2);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1); /* slow, deliberate */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;          /* preferred — editorial brand is unhurried */
  --duration-curtain: 900ms;       /* curtain reveals on hero sections */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-content: 1280px;
  --max-prose: 68ch;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ============================================================
   ELEMENT DEFAULTS — apply tokens to HTML elements directly.
   Drop this CSS into any page and headings/body/etc inherit
   the system.
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
  margin: 0;
}
h2, .h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  margin: 0;
}
h3, .h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  font-style: italic;
  margin: 0;
}
h4, .h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-tracking);
  text-transform: var(--type-h4-transform);
  margin: 0;
}
.display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}
.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-2);
}
.caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  text-transform: var(--type-caption-transform);
  color: var(--fg-3);
}
p {
  max-width: var(--max-prose);
  margin: 0 0 1em 0;
}

/* Wordmark — used in headers, lockups, footers */
.wordmark {
  font-family: var(--font-brandmark);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Dark canvas variant */
.on-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.on-dark .eyebrow,
.on-dark .caption { color: rgba(255,255,255,0.65); }

/* Rule — hairline divider used throughout */
.rule {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0;
}
.rule--strong { border-top-color: var(--border-strong); }
.rule--accent { border-top-color: var(--accent); border-top-width: 2px; }