/* ==========================================================================
   Denmarry — design tokens. THE ONLY PLACE WHERE STYLE VALUES LIVE.

   Rule for the whole project: site.css and the templates never contain a colour,
   a font, a size, a radius, a shadow or a duration as a literal — only var(--…).
   To change the look, change this file.

   Three levels:
   1. Palette   — the brand colours «Фата и фиалка» (D-0014), named once.
   2. Roles     — what a colour is FOR (page, text, button…). Components use only these.
                  The dark theme re-points roles, it never touches components.
   3. Tones     — alternating light/dark blocks. A section with class .tone-soft or
                  .tone-deep re-points the roles inside it, so every component in
                  that block recolours itself.

   Breakpoints cannot be variables in plain CSS media queries, so they are fixed
   numbers used the same way everywhere (taken from trends.satety.de):
     900px — hero and two-column grids fold to one column
     1000px — the side menu becomes a drawer behind the burger
     640px — card grids go to one column
     520px — buttons stretch to full width
     420px — footer goes to one column
   ========================================================================== */

:root {
  /* ---- 1. Palette: light «pearl and violet», dark «night violet» ---------- */
  --c-pearl:          #F6F3F8;
  --c-white:          #FFFFFF;
  --c-ink:            #20112E;
  --c-plum-text:      #382C44;
  --c-mauve:          #6B6177;
  --c-lilac-line:     #E2DAEA;
  --c-violet:         #3A2470;
  --c-violet-deep:    #2C1A58;
  --c-amethyst:       #6E46A6;
  --c-mist:           #E7DEF3;
  --c-veil-1:         #F9F6FB;
  --c-veil-2:         #ECE4F3;
  --c-veil-shadow:    #C9BADB;
  --c-silk-light:     #9C7BD0;
  --c-silk-light-d:   #F1E8FC;

  --c-night:          #120C1A;
  --c-night-surface:  #1D1427;
  --c-night-ink:      #F6F1FA;
  --c-night-text:     #DCD2E6;
  --c-night-muted:    #A698B5;
  --c-night-line:     #33263F;
  --c-lavender:       #CDB6F0;
  --c-lavender-light: #DDCCF7;
  --c-orchid:         #D1A9E8;
  --c-night-mist:     #2B1F3C;
  --c-night-veil-2:   #24173A;
  --c-night-deep:     #0B0710;
  --c-on-lavender:    #1A0F25;
  --c-black-veil:     #050307;

  --c-plum-950:       #1B1026;   /* deep blocks and footer in the light theme */
  --c-plum-50:        #F1EAF7;
  --c-plum-300:       #B9ABC7;

  /* The ribbon of the frame with the bow: soft violet; plain frames lighter, highlighted ones
     darker (owner, 2026-10-18: «Бант везде. Просто рамка светлее и темнее!»). */
  --c-ribbon-soft:            #DCD0F3;
  --c-ribbon-soft-edge:       #CBBBEC;
  --c-ribbon:                 #9F86D8;
  --c-ribbon-edge:            #7E63C2;
  --c-ribbon-night-soft:      #3D3057;
  --c-ribbon-night-soft-edge: #342849;
  --c-ribbon-night:           #8A70BD;
  --c-ribbon-night-edge:      #6F58A0;
  /* The bow of the frames in two tones: soft on plain frames, strong (the logo's) on highlighted ones. */
  --c-bow-soft-light:         #EADFFA;
  --c-bow-soft-deep:          #9B7ED6;
  --c-bow-night-soft-light:   #8C78B4;
  --c-bow-night-soft-deep:    #594580;

  /* Statuses are violet; red only for errors and refusals (team, 2026-10-17). */
  --c-red-ink:        #B3261E;  --c-red-bg:         #FBE8E6;
  --c-red-ink-d:      #F2A39C;  --c-red-bg-d:       #3A1F1C;

  /* ---- 2. Roles: light theme (the default) ---------------------------------- */
  color-scheme: light;
  --bg:            var(--c-pearl);       /* page */
  --surface:       var(--c-white);       /* cards, menus, inputs */
  --surface-2:     var(--c-veil-1);      /* quiet panels */
  --ink:           var(--c-ink);         /* headings */
  --text:          var(--c-plum-text);   /* body text */
  --muted:         var(--c-mauve);       /* secondary text (5.3:1) */
  --line:          var(--c-lilac-line);  /* dividers */
  --line-strong:   var(--c-mauve);       /* input edges: 3:1 for UI boundaries */
  --primary:       var(--c-violet);      /* buttons, logo, links */
  --primary-hover: var(--c-violet-deep);
  --on-primary:    var(--c-white);
  --accent:        var(--c-amethyst);    /* italic words, icons, eyebrows */
  --accent-soft:   var(--c-mist);        /* soft plates: island chips, price band */
  --link:          var(--c-violet);
  --focus:         var(--c-amethyst);
  --logo-fill:     var(--c-violet);
  --logo-silk-deep:  var(--c-violet);    /* silk bow (D-0015): gradient from light to deep */
  --logo-silk-light: var(--c-silk-light);
  --pick-line:            color-mix(in srgb, var(--accent) 45%, transparent);   /* the chosen theme in the menu: a light outline */
  --frame-ribbon:         var(--c-ribbon-soft);    /* the frame with the bow (facts.yaml frames): one look everywhere */
  --frame-ribbon-edge:    var(--c-ribbon-soft-edge);
  --frame-ribbon-hi:      var(--c-ribbon);         /* the same on a highlighted frame (.featured) */
  --frame-ribbon-hi-edge: var(--c-ribbon-edge);
  --frame-bow-light:      var(--c-silk-light);     /* the bow on a highlighted frame: the logo's violet */
  --frame-bow-deep:       var(--c-violet);
  --frame-bow-soft-light: var(--c-bow-soft-light); /* the bow on a plain frame: lighter */
  --frame-bow-soft-deep:  var(--c-bow-soft-deep);
  --frame-bow-shadow:  0 4px 8px color-mix(in srgb, var(--c-plum-950) 18%, transparent);
  --wordmark:      var(--c-violet);      /* the name, one colour */
  --nav-icon:      var(--c-amethyst);    /* section icons in the sidebar */
  --sidebar-bg:    var(--c-white);
  --sidebar-active-bg: var(--c-mist);

  --veil-1:        var(--c-veil-1);      /* animated veil in the hero */
  --veil-2:        var(--c-veil-2);
  --veil-hi:       var(--c-white);
  --veil-shadow:   var(--c-veil-shadow);
  --veil-mode:     light;                /* read by veil.js */

  --status-wait-fg:  var(--c-amethyst);   --status-wait-bg:  var(--c-veil-2);
  --status-ok-fg:    var(--c-violet);     --status-ok-bg:    var(--c-mist);
  --status-err-fg:   var(--c-red-ink);    --status-err-bg:   var(--c-red-bg);
  --status-date-fg:  var(--c-violet);     --status-date-bg:  var(--c-mist);

  --header-bg:     color-mix(in srgb, var(--bg) 82%, transparent);
  --google-bg:     #FFFFFF;              /* the Google button keeps Google's own colours */
  --google-line:   #747775;              /* (developers.google.com/identity/branding-guidelines) */
  --google-ink:    #1F1F1F;
  --google-blue:   #4285F4;              /* Google's «G»: its four colours, the same in both themes */
  --google-red:    #EA4335;
  --google-yellow: #FBBC05;
  --google-green:  #34A853;
  --google-g-bg:   #FFFFFF;              /* the «G» always sits on white, on the dark button too */
  --glass-bg:      color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-line:    color-mix(in srgb, var(--line) 75%, transparent);
  --hero-fade:     color-mix(in srgb, var(--bg) 72%, transparent);
  --hero-fade-2:   color-mix(in srgb, var(--bg) 28%, transparent);
  --grain-opacity: .08;

  --shadow-btn:    0 14px 30px -16px color-mix(in srgb, var(--primary) 85%, transparent);
  --shadow-card:   0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-glass:  0 40px 70px -40px color-mix(in srgb, var(--ink) 40%, transparent);
  --shadow-menu:   0 24px 48px -24px color-mix(in srgb, var(--ink) 35%, transparent);

  /* ---- 3. Tones for alternating blocks ------------------------------------- */
  --tone-soft-bg:      var(--c-veil-2);
  --tone-soft-surface: var(--c-white);
  --tone-deep-bg:      var(--c-plum-950);
  --tone-deep-surface: color-mix(in srgb, var(--c-plum-950) 86%, var(--c-white));
  --tone-deep-ink:     var(--c-plum-50);
  --tone-deep-text:    var(--c-plum-50);
  --tone-deep-muted:   var(--c-plum-300);
  --tone-deep-line:    color-mix(in srgb, var(--c-plum-50) 18%, transparent);
  --tone-deep-primary: var(--c-lavender);
  --tone-deep-primary-hover: var(--c-lavender-light);
  --tone-deep-on-primary:    var(--c-on-lavender);
  --tone-deep-accent:  var(--c-orchid);
  --tone-deep-accent-soft: var(--c-night-mist);

  /* ---- Typography ----------------------------------------------------------- */
  --font-serif: "Cormorant Variable", "Cormorant", Georgia, "Times New Roman", serif;
  /* Figures (prices, sums, counts, step numbers) take the sans with even digits: Cormorant's digits are
     old-style (owner, 2026-10-19: «6 выше, 7 ниже»). Every figure uses these, so one place changes all. */
  --font-num:   var(--font-sans);
  --fw-num:     var(--fw-semibold);
  --ls-num:     var(--ls-tight);
  --font-sans:  "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-2xs:  12px;
  --fs-xs:   12.5px;
  --fs-sm:   14px;
  --fs-nav:  14.5px;
  --fs-base: 16px;
  --fs-md:   17px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-h4:   clamp(20px, 2.2vw, 24px);
  --fs-h3:   clamp(24px, 2.8vw, 30px);
  --fs-price:      clamp(34px, 3.6vw, 44px);   /* the price on the package cards: larger than their titles (owner, 2026-10-19) */
  --fs-price-hero: clamp(28px, 3vw, 36px);     /* the price on the service pages */
  --fs-price-line: clamp(22px, 2.2vw, 27px);   /* the home page line «Полное сопровождение: 670 €» (words and a price) */
  --fs-h2:   clamp(32px, 4vw, 50px);
  --fs-h1:   clamp(42px, 6.2vw, 86px);
  --fs-h1-page: clamp(38px, 5vw, 64px);
  --fs-num:  clamp(44px, 5vw, 56px);      /* step numbers */
  --fs-wordmark: 25px;
  --fs-tagline:  10.5px;   /* «Брак в Дании» under the name */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight: .98;
  --lh-snug:  1.12;
  --lh-head:  1.25;
  --lh-base:  1.6;

  --ls-tight:   -.02em;
  --ls-snug:    -.01em;
  --ls-eyebrow: .14em;
  --ls-tagline: .12em;
  --ls-caps:    .08em;

  /* ---- Space and layout ----------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  --container:   1180px;
  --measure:     64ch;                       /* comfortable line length for text */
  --gutter:      clamp(16px, 4vw, 36px);     /* page side padding */
  --section-y:   clamp(56px, 8vw, 96px);     /* vertical padding of a section */
  --header-h:    68px;
  --sidebar-w:   248px;                      /* desktop side menu, open */
  --sidebar-w-min: 76px;                     /* … and folded to icons */
  --drag-zone:   10px;                       /* grab area on the menu's edge */

  /* ---- Shape ---------------------------------------------------------------- */
  --border:      1px;
  --border-bold: 3px;
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  --control-h:    48px;   /* buttons and inputs share one height (trends) */
  --control-h-sm: 40px;
  --icon-btn:     40px;
  --icon:         18px;
  --icon-sm:      15px;
  --logo-size:    32px;
  --frame-bow:    58px;   /* the bow on the corner of a frame */
  --frame-bow-sm: 44px;   /* on a phone, where the frame reaches the gutter */
  --frame-ribbon-w: 5px;

  /* ---- Motion and layers ---------------------------------------------------- */
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .6s;
  --ease:     cubic-bezier(.2, .7, .2, 1);

  --z-bar:    40;
  --z-header: 50;
  --z-menu:   60;
}

/* Dark theme: only roles move; the palette above stays. -------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --google-bg:     #131314;
  --google-line:   #8E918F;
  --google-ink:    #E3E3E3;
  --bg:            var(--c-night);
  --surface:       var(--c-night-surface);
  --surface-2:     color-mix(in srgb, var(--c-night-surface) 70%, var(--c-night));
  --ink:           var(--c-night-ink);
  --text:          var(--c-night-text);
  --muted:         var(--c-night-muted);
  --line:          var(--c-night-line);
  --line-strong:   var(--c-night-muted);
  --primary:       var(--c-lavender);
  --primary-hover: var(--c-lavender-light);
  --on-primary:    var(--c-on-lavender);
  --accent:        var(--c-orchid);
  --accent-soft:   var(--c-night-mist);
  --link:          var(--c-lavender);
  --focus:         var(--c-orchid);
  --logo-fill:     var(--c-lavender);
  --logo-silk-deep:  var(--c-lavender);
  --logo-silk-light: var(--c-silk-light-d);
  --frame-ribbon:         var(--c-ribbon-night-soft);
  --frame-ribbon-edge:    var(--c-ribbon-night-soft-edge);
  --frame-ribbon-hi:      var(--c-ribbon-night);
  --frame-ribbon-hi-edge: var(--c-ribbon-night-edge);
  --frame-bow-light:      var(--primary-hover);    /* highlighted frame: in the tone of the button «Подробнее» (owner, 2026-10-18) */
  --frame-bow-deep:       var(--primary);
  --frame-bow-soft-light: var(--c-bow-night-soft-light);   /* plain frame: dimmer */
  --frame-bow-soft-deep:  var(--c-bow-night-soft-deep);
  --wordmark:      var(--c-lavender);
  --nav-icon:      var(--c-orchid);
  --sidebar-bg:    var(--c-night-surface);
  --sidebar-active-bg: var(--c-night-mist);

  --veil-1:        var(--c-night);
  --veil-2:        var(--c-night-veil-2);
  --veil-hi:       var(--c-lavender);
  --veil-shadow:   var(--c-black-veil);
  --veil-mode:     dark;

  --status-wait-fg:  var(--c-orchid);       --status-wait-bg:  var(--c-night-mist);
  --status-ok-fg:    var(--c-lavender);     --status-ok-bg:    var(--c-night-mist);
  --status-err-fg:   var(--c-red-ink-d);    --status-err-bg:   var(--c-red-bg-d);
  --status-date-fg:  var(--c-orchid);       --status-date-bg:  var(--c-night-mist);

  --grain-opacity: .06;
  --shadow-card:   0 1px 0 color-mix(in srgb, var(--c-white) 4%, transparent) inset, 0 18px 40px -28px var(--c-black-veil);
  --shadow-glass:  0 40px 70px -40px var(--c-black-veil);
  --shadow-menu:   0 24px 48px -24px var(--c-black-veil);

  --tone-soft-bg:      color-mix(in srgb, var(--c-night-surface) 55%, var(--c-night));
  --tone-soft-surface: var(--c-night-surface);
  --tone-deep-bg:      var(--c-night-deep);
  --tone-deep-surface: var(--c-night-surface);
  --tone-deep-ink:     var(--c-night-ink);
  --tone-deep-text:    var(--c-night-text);
  --tone-deep-muted:   var(--c-night-muted);
  --tone-deep-line:    var(--c-night-line);
  --tone-deep-primary: var(--c-lavender);
  --tone-deep-primary-hover: var(--c-lavender-light);
  --tone-deep-on-primary:    var(--c-on-lavender);
  --tone-deep-accent:  var(--c-orchid);
  --tone-deep-accent-soft: var(--c-night-mist);
}

/* Tones: put .tone-soft or .tone-deep on a section; everything inside follows. */
.tone-soft {
  --bg: var(--tone-soft-bg);
  --surface: var(--tone-soft-surface);
}
.tone-deep {
  --bg: var(--tone-deep-bg);
  --surface: var(--tone-deep-surface);
  --surface-2: var(--tone-deep-surface);
  --ink: var(--tone-deep-ink);
  --text: var(--tone-deep-text);
  --muted: var(--tone-deep-muted);
  --line: var(--tone-deep-line);
  --line-strong: var(--tone-deep-muted);
  --primary: var(--tone-deep-primary);
  --primary-hover: var(--tone-deep-primary-hover);
  --on-primary: var(--tone-deep-on-primary);
  --accent: var(--tone-deep-accent);
  --accent-soft: var(--tone-deep-accent-soft);
  --link: var(--tone-deep-primary);
  --focus: var(--tone-deep-accent);
  --logo-fill: var(--tone-deep-primary);
  --logo-silk-deep: var(--tone-deep-primary);
  --logo-silk-light: var(--c-silk-light-d);
  --frame-ribbon:         var(--c-ribbon-night-soft);
  --frame-ribbon-edge:    var(--c-ribbon-night-soft-edge);
  --frame-ribbon-hi:      var(--c-ribbon-night);
  --frame-ribbon-hi-edge: var(--c-ribbon-night-edge);
  --wordmark: var(--tone-deep-primary);
}