/* Zarfika design tokens v2 (görev 456, P1-1). Source: docs/tasarim/v2/tokens.css + docs/tasarim/v2/tokens.md §0.
   Names are backward compatible with v1; values are v2 ("Mühür ve kâğıt"). Two scopes:
   1) App tokens (--color-*, --font-*, --text-*, --space-*, --radius-*, --shadow-*, --duration-*, --ease-*).
   2) Invitation tokens (--inv-*): set per design by the theme engine; defaults below are the neutral fallback.
   Derived tokens (var() of another token) are re-declared on [data-theme] so theme overrides resolve there. */

/* Brand face (OFL, /fonts/fraunces-OFL.txt). Weight 500 (--weight-medium) is declared here because invitation pages inline only tokens.css; 600/700 are in fonts.css (#818). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fraunces-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-011D, U+0120-012F, U+0132-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fraunces-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fraunces-500-latin-tr.woff2) format('woff2');unicode-range:U+011E-011F, U+0130, U+015E-015F;}

:root {
  /* ---- App colour ---- */
  --color-bg: #F7F2EA;              /* paper */
  --color-surface: #FFFDF9;         /* card, form */
  --color-surface-alt: #EEE6DA;     /* secondary band, table head */
  --color-surface-ink: #1D1824;     /* NEW dark band (hero proof, footer, CTA) */
  --color-border: #E2D8CA;
  --color-border-strong: #7D7163;   /* inputs, 4.27:1 on bg (≥3:1 component) */
  --color-text: #1D1824;            /* 15.59 on bg */
  --color-text-muted: #5C5563;      /* 6.42 bg · 5.78 surface-alt · 7.04 surface */
  --color-text-on-ink: #F7F2EA;     /* NEW 15.59 on surface-ink */
  --color-text-on-ink-muted: #B9B1C2; /* NEW 8.38 on surface-ink */
  --color-primary: #8A1C3C;         /* claret seal; 8.15 on bg */
  --color-primary-hover: #6E1530;
  --color-on-primary: #FFFFFF;      /* 9.08 */
  --color-primary-soft: #F6E4E8;    /* selected card bg */
  --color-primary-on-ink: #F2A7B8;  /* NEW links/active on ink; 9.10 */
  --color-accent: #B8894A;          /* gold foil — decoration only, never text on light */
  --color-accent-on-ink: #D2A860;   /* NEW foil text allowed on ink; 7.87 */
  --brand-gold-deep: #9A6F33;
  --color-sage: #4E6B55;            /* NEW secondary accent (badges, icons); 5.30 on bg */
  --color-focus: #2B5680;           /* 2 px ring, 2 px offset; 6.86 */
  --color-success: #1E6B47;  --color-success-soft: #E2F0E7;
  --color-warning: #7F5200;  --color-warning-soft: #FAEED5;
  --color-danger: #A8231C;   --color-danger-soft: #FAE5E2;
  --color-info: #2B5680;     --color-info-soft: #E4ECF5;
  --color-skeleton: #E9E0D3;
  --color-overlay: rgba(29, 24, 36, 0.60);

  /* ---- Typography ---- */
  --font-ui: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif; /* v1 brand face was too thin below 24 px */
  --text-xs: 0.75rem;   /* 12 — legal/caption only */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-md: 1.125rem;  /* 18 — marketing body */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5rem;    /* 24 */
  --text-2xl: 1.875rem; /* 30 */
  --text-3xl: 2.25rem;  /* 36 */
  --text-4xl: 3rem;     /* 48 */
  --text-5xl: 3.75rem;  /* 60 */
  /* NEW fluid display sizes (390 → 1440) */
  --text-display-1: clamp(2.5rem, 1.56rem + 3.85vw, 5rem);    /* 40 → 80, hero h1 */
  --text-display-2: clamp(2rem, 1.53rem + 1.92vw, 3.25rem);   /* 32 → 52, section h2 */
  --text-display-3: clamp(1.5rem, 1.31rem + 0.77vw, 2rem);    /* 24 → 32, card/step title */
  --text-eyebrow: 0.8125rem;        /* NEW 13, uppercase, tracking .12em, weight 600 */
  --leading-tight: 1.08;            /* display */
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-display: -0.02em;      /* NEW Fraunces ≥ 32 px */
  --tracking-eyebrow: 0.12em;       /* NEW */
  --weight-regular: 400;
  --weight-medium: 500;             /* NEW Fraunces display weight */
  --weight-semibold: 600;
  --weight-bold: 700;
  --measure: 62ch;                  /* NEW max line length for body copy */

  /* ---- Spacing (4 px grid, unchanged) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --space-24: 6rem;                 /* NEW */
  --space-32: 8rem;                 /* NEW */
  --section-y: clamp(4rem, 2.51rem + 6.1vw, 8rem);  /* NEW vertical section padding 64 → 128 */
  --gutter: clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem); /* NEW page side padding 20 → 40 */

  /* ---- Radius (tighter: stationery, not app bubbles) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-device: 44px;            /* NEW phone frame */

  /* ---- Shadow (paper) ---- */
  --shadow-sm: 0 1px 2px rgba(29, 24, 36, 0.06), 0 1px 0 rgba(29, 24, 36, 0.04);
  --shadow-md: 0 2px 4px rgba(29, 24, 36, 0.05), 0 10px 24px -8px rgba(29, 24, 36, 0.14);
  --shadow-lg: 0 4px 8px rgba(29, 24, 36, 0.06), 0 28px 56px -16px rgba(29, 24, 36, 0.28);
  --shadow-card-lift: 0 6px 12px rgba(29, 24, 36, 0.08), 0 36px 72px -20px rgba(29, 24, 36, 0.34); /* NEW hover on design cards */

  /* ---- Layout ---- */
  --touch-min: 44px;
  --content-max: 560px;
  --app-max: 1200px;
  --marketing-max: 1240px;          /* NEW */
  --wizard-max: 1120px;             /* NEW wizard: form 480 + live preview */
  --header-height: 64px;            /* v1: 56 */

  /* ---- Motion (unchanged) ---- */
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
  --duration-intro-max: 3000ms;
  --duration-reduced: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Invitation defaults (neutral fallback theme) ---- */
  --inv-bg: #FBF8F4;
  --inv-surface: #FFFFFF;
  --inv-text: #1F1A17;
  --inv-text-muted: #6B625B;
  --inv-primary: #7A2E3A;
  --inv-on-primary: #FFFFFF;
  --inv-accent: #C9A15B;
  --inv-ornament: #C9A15B;
  --inv-border: #E4DCD2;
  --inv-danger: #B3261E;          /* form errors; engine: bg luminance < 0.2 → #FF8A80 */
  --inv-focus: var(--inv-text);    /* focus ring, 2 px + 2 px offset */
  --inv-font-display: var(--font-brand);
  --inv-font-script: var(--font-brand);
  --inv-font-body: var(--font-ui);
  --inv-display-weight: 600;
  --inv-display-transform: none;
  --inv-display-tracking: 0;
  --inv-body-size: var(--text-base);
  --inv-radius: var(--radius-lg);
  --inv-backdrop: var(--inv-bg);   /* desktop area around the 560 px column */
}

/* Invitation motion defaults (docs/tasarim/v2/yon.md §3) and derived invitation tokens: theme node, not :root. */
[data-theme] {
  --inv-motion-intro-total: 2600ms;       /* tap → climax, hard cap 2800ms */
  --inv-motion-ease-open: var(--ease-in-out);
  --inv-motion-name-in: 900ms;
  --inv-motion-reveal: 700ms;
  --inv-motion-reveal-distance: 16px;
  --inv-motion-stagger: 90ms;
  --inv-motion-micro: 180ms;
  --inv-motion-ambient: none;             /* keyword read by page.js: none | petals | stars | confetti | neon | dust */
  --inv-focus: var(--inv-text);
  --inv-font-display: var(--font-brand);
  --inv-font-script: var(--font-brand);
  --inv-font-body: var(--font-ui);
  --inv-body-size: var(--text-base);
  --inv-radius: var(--radius-lg);
  --inv-backdrop: var(--inv-bg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}