/* =============================================================================
   WELLUNEX — Anlar & Kâğıt: the one palette

   Every page the couple or the team sees (public site, sign-in, panel, admin)
   takes its colours from here; the guests' invitations do not load this file
   and keep their templates' own colours.

   The colour of the site comes from what a wedding is made of, not from
   interface effects: real photographs of the day, and the paper stocks of an
   invitation suite (blush, sage, butter) laid flat as blocks. The interface
   itself is paper and ink: ink buttons on paper white, ivory buttons on the
   night paper of the dark theme. One accent, antique gold, writes the italic
   word, the kicker and the thin foil lines: bronze on paper (gold itself is too
   light to read there), champagne at night. Burgundy is the wax seal's own
   colour and stays on the seal. No gradients, glows or glass.

   Order of the file
     1. Light theme   html:root
     2. Dark theme    html:root[data-theme="dark"]  (the layouts set it from the
                      visitor's choice, or from the device setting if none)
     3. The older token families, read from the two sets above

   html:root outweighs the plain :root blocks still left in other sheets, so
   this file wins wherever it is linked, whatever the order of the links.
   ============================================================================= */

/* 1. Light: paper white, ink, bronze, three paper stocks ------------------------ */
html:root {
  color-scheme: light;

  --wx-bg: #FFFDF9;            /* paper white */
  --wx-bg-2: #F6F1E9;          /* sand: alternate bands, footer */
  --wx-surface: #FFFEFB;       /* cards */
  --wx-surface-2: #F8F4EE;     /* wells and hover inside a card */
  --wx-surface-3: #EFE8DE;     /* pressed, selected neutral */
  --wx-field: #FFFEFC;
  --wx-line: #ECE4D8;
  --wx-line-strong: #D9CEBF;
  --wx-line-dark: #ECE4D8;
  --wx-line-input: #9A9184;    /* 3:1 on a field */

  --wx-ink: #221C18;
  --wx-ink-2: #4C443D;
  --wx-ink-3: #6F655C;
  --wx-ink-4: #8E857B;         /* placeholders */
  --wx-on-ink: #FFFDF9;

  /* The one call to action: ink on paper. */
  --wx-cta: #221C18;
  --wx-cta-hover: #3A322B;
  --wx-on-cta: #FFFDF9;

  --wx-gold: #8A5F24;          /* accent text, links, focus: bronze, 5.5:1 */
  --wx-gold-2: #8A5F24;
  --wx-gold-strong: #6E4B1B;
  --wx-accent-fill: #C29E61;   /* a gold leaf under dark text, for badges */
  --wx-accent-fill-hover: #B89154;
  --wx-on-accent: #241B13;
  --wx-gold-soft: #F5EBD8;
  --wx-gold-line: #D9BC8C;     /* the foil hairline */
  --wx-gold-wash: #FBF5EA;

  /* Paper stocks of an invitation suite: blocks, tiles, the sign-in stage. */
  --wx-paper-blush: #F3E3DC;
  --wx-paper-blush-ink: #7B2E35;
  --wx-paper-blush-line: #E8D0C6;
  --wx-paper-sage: #E0E6D8;
  --wx-paper-sage-ink: #3E4C38;
  --wx-paper-sage-line: #CBD5C0;
  --wx-paper-butter: #F4E8C8;
  --wx-paper-butter-ink: #6E5420;
  --wx-paper-butter-line: #E6D5A8;
  /* The tooth of uncoated paper, laid over the paper stocks. */
  --wx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .24 0 0 0 0 .18 .13 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --wx-ok: #446845;
  --wx-ok-soft: #E8F0E4;
  --wx-ok-line: #C6D8C2;
  --wx-warn: #A14E1C;
  --wx-warn-soft: #F8E9DE;
  --wx-warn-line: #ECCBB5;
  --wx-danger: #A23D3A;
  --wx-danger-soft: #F8E5E2;
  --wx-danger-line: #EAC3BF;
  --wx-info: #3E6378;
  --wx-info-soft: #E4ECF1;
  --wx-info-line: #C4D4DE;
  --wx-pink: #8A5F24;          /* former feature colours fold into the accent */
  --wx-purple: #8A5F24;
  --wx-seal: #7B2235;          /* the wax seal object only */

  --wx-fg-rgb: 34 28 24;
  --wx-gold-rgb: 176 136 72;
  --wx-bg-rgb: 255 254 251;
  --wx-sunk-rgb: 34 28 24;
  --wx-sunk-k: 0.12;
  --wx-shadow-k: 0.22;
  --wx-header-bg: rgb(255 253 249 / 0.9);
  --wx-footer-bg: #F6F1E9;

  --wx-lift-sm: 0 1px 2px rgb(40 30 20 / 0.06);
  --wx-lift: 0 1px 2px rgb(40 30 20 / 0.05), 0 10px 28px -12px rgb(40 30 20 / 0.16);
  --wx-lift-lg: 0 28px 56px -28px rgb(40 30 20 / 0.42);
  --wx-focus: 0 0 0 3px rgb(138 95 36 / 0.28);

  /* Couple panel, sign-in and admin */
  --pn-bg: #F6F1E9;
  --pn-surface: #FFFEFB;
  --pn-surface-2: #F9F5EF;
  --pn-surface-3: #EFE8DE;
  --pn-field: #FFFEFC;
  --pn-border: #E9E1D5;
  --pn-border-strong: #D3C8B8;
  --pn-border-input: #9A9184;
  --pn-border-hover: #B5AB9C;
  --pn-ink: #221C18;
  --pn-ink-2: #4C443D;
  --pn-ink-3: #6F655C;
  --pn-ink-hover: #3A322B;
  --pn-ink-inverse: #FFFDF9;
  --pn-on-ink: #FFFDF9;
  --pn-placeholder: #8E857B;
  --pn-accent: #8A5F24;
  --pn-accent-strong: #6E4B1B;
  --pn-accent-fill: #C29E61;
  --pn-on-accent: #241B13;
  --pn-accent-soft: #F5EBD8;
  --pn-accent-line: #D9BC8C;
  --pn-accent-wash: #FBF5EA;
  --pn-paper-blush: #F3E3DC;
  --pn-paper-blush-ink: #7B2E35;
  --pn-paper-blush-line: #E8D0C6;
  --pn-paper-sage: #E0E6D8;
  --pn-paper-sage-ink: #3E4C38;
  --pn-paper-sage-line: #CBD5C0;
  --pn-paper-butter: #F4E8C8;
  --pn-paper-butter-ink: #6E5420;
  --pn-paper-butter-line: #E6D5A8;
  --pn-success: #446845;
  --pn-success-soft: #E8F0E4;
  --pn-success-line: #C6D8C2;
  --pn-success-hover: #38573A;
  --pn-warning: #A14E1C;
  --pn-warning-soft: #F8E9DE;
  --pn-warning-line: #ECCBB5;
  --pn-warning-dot: #C9792E;
  --pn-danger: #A23D3A;
  --pn-danger-soft: #F8E5E2;
  --pn-danger-line: #EAC3BF;
  --pn-info: #3E6378;
  --pn-info-soft: #E4ECF1;
  --pn-info-line: #C4D4DE;
  --pn-switch-off: #D8D0C4;
  --pn-header-bg: rgb(246 241 233 / 0.9);
  --pn-preview-bg: #EDE5D8;
  --pn-wa-fg: #2E6A45;
  --pn-wa-bd: #BFD6C4;
  --pn-wa-bg: #E6F0E8;
  --pn-wa-hover: #D9E8DC;
  --pn-scroll: rgb(176 136 72 / 0.42);
  --pn-scroll-hover: rgb(176 136 72 / 0.7);
  --pn-shadow-sm: 0 1px 2px rgb(40 30 20 / 0.06);
  --pn-shadow: 0 1px 2px rgb(40 30 20 / 0.05), 0 6px 20px rgb(40 30 20 / 0.06);
  --pn-shadow-lg: 0 12px 40px rgb(40 30 20 / 0.14);
  --pn-focus: 0 0 0 3px rgb(138 95 36 / 0.28);
  --pn-backdrop: rgb(34 28 24 / 0.42);
  --pn-toast-ok: #A9CFA9;      /* on the ink toast */
  --pn-toast-danger: #F0A49C;
  --pn-brand-tile: #221C18;    /* the W keeps a dark tile in both themes */
  --pn-brand-line: #221C18;
  --pn-brand-gold: #D9BC8C;
}

/* 2. Dark: night paper, ivory text, champagne ------------------------------------ */
html:root[data-theme="dark"] {
  color-scheme: dark;

  --wx-bg: #141110;
  --wx-bg-2: #1B1714;
  --wx-surface: #1F1A17;
  --wx-surface-2: #27211D;
  --wx-surface-3: #312A25;
  --wx-field: #1A1613;
  --wx-line: #342C26;
  --wx-line-strong: #463C34;
  --wx-line-dark: #342C26;
  --wx-line-input: #776E65;

  --wx-ink: #F3EDE4;
  --wx-ink-2: #CFC5B9;
  --wx-ink-3: #A99E93;
  --wx-ink-4: #857B71;
  --wx-on-ink: #141110;

  --wx-cta: #F3EDE4;
  --wx-cta-hover: #FFFAF2;
  --wx-on-cta: #141110;

  --wx-gold: #E1BE82;
  --wx-gold-2: #E6C78F;
  --wx-gold-strong: #EDD3A2;
  --wx-accent-fill: #E1BE82;
  --wx-accent-fill-hover: #E9CA92;
  --wx-on-accent: #1E160C;
  --wx-gold-soft: #382D1C;
  --wx-gold-line: #6A5533;
  --wx-gold-wash: #221B13;

  --wx-paper-blush: #2C201E;
  --wx-paper-blush-ink: #E9B3A9;
  --wx-paper-blush-line: #45302C;
  --wx-paper-sage: #20271F;
  --wx-paper-sage-ink: #B9CBAE;
  --wx-paper-sage-line: #33402F;
  --wx-paper-butter: #2B2516;
  --wx-paper-butter-ink: #E3CB8E;
  --wx-paper-butter-line: #45391F;
  --wx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .92 0 0 0 0 .86 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --wx-ok: #91BF92;
  --wx-ok-soft: #223023;
  --wx-ok-line: #39503A;
  --wx-warn: #EB9666;
  --wx-warn-soft: #392A20;
  --wx-warn-line: #5E412E;
  --wx-danger: #E27D7B;
  --wx-danger-soft: #3A2524;
  --wx-danger-line: #613735;
  --wx-info: #90B7CF;
  --wx-info-soft: #1E2C34;
  --wx-info-line: #33505F;
  --wx-pink: #E1BE82;
  --wx-purple: #E1BE82;
  --wx-seal: #7B2235;

  --wx-fg-rgb: 243 237 228;
  --wx-gold-rgb: 225 190 130;
  --wx-bg-rgb: 31 26 23;
  --wx-sunk-rgb: 6 5 4;
  --wx-sunk-k: 0.7;
  --wx-shadow-k: 0.85;
  --wx-header-bg: rgb(20 17 16 / 0.88);
  --wx-footer-bg: #1B1714;

  --wx-lift-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --wx-lift: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 30px -14px rgb(0 0 0 / 0.55);
  --wx-lift-lg: 0 30px 60px -30px rgb(0 0 0 / 0.8);
  --wx-focus: 0 0 0 3px rgb(225 190 130 / 0.35);

  --pn-bg: #141110;
  --pn-surface: #1F1A17;
  --pn-surface-2: #241E1A;
  --pn-surface-3: #2E2722;
  --pn-field: #1A1613;
  --pn-border: #342C26;
  --pn-border-strong: #463C34;
  --pn-border-input: #776E65;
  --pn-border-hover: #5E544A;
  --pn-ink: #F3EDE4;
  --pn-ink-2: #CFC5B9;
  --pn-ink-3: #A99E93;
  --pn-ink-hover: #FFFAF2;
  --pn-ink-inverse: #141110;
  --pn-on-ink: #141110;
  --pn-placeholder: #857B71;
  --pn-accent: #E1BE82;
  --pn-accent-strong: #EDD3A2;
  --pn-accent-fill: #E1BE82;
  --pn-on-accent: #1E160C;
  --pn-accent-soft: #382D1C;
  --pn-accent-line: #6A5533;
  --pn-accent-wash: #221B13;
  --pn-paper-blush: #2C201E;
  --pn-paper-blush-ink: #E9B3A9;
  --pn-paper-blush-line: #45302C;
  --pn-paper-sage: #20271F;
  --pn-paper-sage-ink: #B9CBAE;
  --pn-paper-sage-line: #33402F;
  --pn-paper-butter: #2B2516;
  --pn-paper-butter-ink: #E3CB8E;
  --pn-paper-butter-line: #45391F;
  --pn-success: #91BF92;
  --pn-success-soft: #223023;
  --pn-success-line: #39503A;
  --pn-success-hover: #A3CBA4;
  --pn-warning: #EB9666;
  --pn-warning-soft: #392A20;
  --pn-warning-line: #5E412E;
  --pn-warning-dot: #EB9666;
  --pn-danger: #E27D7B;
  --pn-danger-soft: #3A2524;
  --pn-danger-line: #613735;
  --pn-info: #90B7CF;
  --pn-info-soft: #1E2C34;
  --pn-info-line: #33505F;
  --pn-switch-off: #4A413A;
  --pn-header-bg: rgb(20 17 16 / 0.9);
  --pn-preview-bg: #0F0D0C;
  --pn-wa-fg: #8CC79E;
  --pn-wa-bd: #2F4A36;
  --pn-wa-bg: #1E2B21;
  --pn-wa-hover: #25352A;
  --pn-scroll: rgb(225 190 130 / 0.36);
  --pn-scroll-hover: rgb(225 190 130 / 0.62);
  --pn-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --pn-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.25);
  --pn-shadow-lg: 0 16px 48px rgb(0 0 0 / 0.5);
  --pn-focus: 0 0 0 3px rgb(225 190 130 / 0.35);
  --pn-backdrop: rgb(6 5 4 / 0.62);
  --pn-toast-ok: #446845;
  --pn-toast-danger: #A23D3A;
  --pn-brand-tile: #27211D;
  --pn-brand-line: #463C34;
  --pn-brand-gold: #E1BE82;
}

/* 3. The older families, read from the sets above ------------------------------
   core.css (shared with the invitations) still names its colours obsidian,
   imperial gold and champagne, and the planning tools have their own --tool-*
   names; on these pages they all point at the palette. */
html:root {
  --bg-obsidian: var(--wx-bg);
  --bg-dark: var(--wx-bg);
  --bg-surface: var(--wx-surface);
  --bg-card-dark: var(--wx-surface);
  --bg-card-border: var(--wx-line);
  --gold-imperial: var(--wx-gold);
  --gold-champagne: var(--wx-gold-2);
  --gold-400: var(--wx-gold);
  --gold-300: var(--wx-gold-2);
  --gold-200: var(--wx-gold-line);
  --gold-100: var(--wx-gold-soft);
  /* Flat: gold reads as a material on the seal and the monogram, not as a
     gradient on buttons. Kept a gradient so background-image still works. */
  --gold-gradient: linear-gradient(var(--wx-accent-fill), var(--wx-accent-fill));
  --gold-shimmer: linear-gradient(var(--wx-gold), var(--wx-gold));
  --wx-gold-flat: linear-gradient(var(--wx-gold), var(--wx-gold));
  --text-pure: var(--wx-ink);
  --text-light: var(--wx-ink);
  --text-mist: var(--wx-ink-3);
  --text-muted: var(--wx-ink-3);
  --text-dark: var(--wx-ink);
  --shadow-luxury: var(--wx-lift);
  --shadow-glow: 0 0 0 transparent;

  /* Planning tools on the public site (tools.css re-maps them for the panel) */
  --tool-ink: var(--wx-ink);
  --tool-ink-soft: var(--wx-ink);
  --tool-ink-dim: var(--wx-ink-2);
  --tool-muted: var(--wx-ink-3);
  --tool-faint: var(--wx-ink-3);
  --tool-accent: var(--wx-gold);
  --tool-accent-fill: var(--wx-cta);
  --tool-accent-on-fill: var(--wx-on-cta);
  --tool-accent-border: var(--wx-cta);
  --tool-surface: var(--wx-surface);
  --tool-surface-2: var(--wx-surface-2);
  --tool-surface-3: var(--wx-surface-3);
  --tool-sunken: var(--wx-surface-2);
  --tool-sunken-2: var(--wx-surface-3);
  --tool-border: var(--wx-line);
  --tool-border-soft: var(--wx-line);
  --tool-border-input: var(--wx-line-input);
  --tool-line: var(--wx-line);
  --tool-line-2: var(--wx-line-strong);
  --tool-line-3: var(--wx-gold-line);
  --tool-accent-soft: var(--wx-gold-soft);
  --tool-ok: var(--wx-ok);
  --tool-ok-bright: var(--wx-ok);
  --tool-ok-soft: var(--wx-ok-soft);
  --tool-ok-line: var(--wx-ok-line);
  --tool-danger: var(--wx-danger);
  --tool-danger-bright: var(--wx-danger);
  --tool-danger-line: var(--wx-danger-line);
  --tool-warn: var(--wx-warn);
  --tool-info: var(--wx-info);
  --tool-pink: var(--wx-gold);
  --tool-purple: var(--wx-gold);
  --tool-shadow: var(--wx-lift);
  --tool-shadow-lg: var(--wx-lift-lg);
}