/* Hallmark · Престиж — дизайн-токены
 * theme: custom · vibe: "тёплое ремесло, дерево, глубокий бордо"
 * paper: oklch(96% 0.010 70) · accent(бордо): oklch(41% 0.14 22)
 * display: Cormorant Garamond · body: Manrope · script: Marck Script
 * axes: light / roman-serif (high-contrast) / warm (red 20–28°)
 */

:root {
  /* ---- Бумага / поверхности (тёплая слоновая кость, тон дерева) ---- */
  --color-paper:    oklch(96%   0.010 70);   /* базовый фон */
  --color-paper-2:  oklch(93.5% 0.013 68);   /* карточки, панели */
  --color-paper-3:  oklch(90%   0.016 66);   /* углублённые плитки */

  /* ---- Тёмная древесно-угольная поверхность (как клин на визитке) ---- */
  --color-carbon:   oklch(24%   0.020 45);   /* тёмная секция, фон под ивори-текст */
  --color-carbon-2: oklch(29%   0.020 45);

  /* ---- Чернила / текст (тёплый тёмно-коричневый, не чёрный) ---- */
  --color-ink:      oklch(22%   0.022 45);
  --color-ink-2:    oklch(37%   0.021 45);   /* вторичный текст (контрастнее) */
  --color-muted:    oklch(46%   0.017 50);   /* подписи, служебное (контрастнее) */
  --color-on-carbon:  oklch(94% 0.010 72);   /* текст на тёмной поверхности */
  --color-on-carbon-2: oklch(80% 0.012 70);

  /* ---- Линии ---- */
  --color-rule:     oklch(84%   0.012 65);   /* основные хайрлайны */
  --color-rule-2:   oklch(88%   0.010 65);   /* вторичные */
  --color-rule-carbon: oklch(38% 0.016 45);

  /* ---- Акцент: фирменный бордо, выровнен по логотипу (≈ #460C1B → oklch 27% 0.09 11) ---- */
  --color-accent:      oklch(29% 0.105 14);  /* глубокий бордо логотипа */
  --color-accent-deep: oklch(24% 0.09 14);   /* нажатие, тёмный ховер */
  --color-accent-soft: oklch(29% 0.105 14 / 0.10); /* фон-подложка акцента */
  --color-on-accent:   oklch(96% 0.010 72);  /* текст на заливке акцентом */
  --color-focus:       oklch(38% 0.15 14);   /* кольцо фокуса, выше chroma */

  /* ---- Типографика ---- */
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-script:  "Marck Script", "Segoe Script", cursive;

  /* Шкала (major third, 1.25), от 16px */
  --text-xs:   0.8rem;     /* 12.8 */
  --text-sm:   0.9rem;     /* 14.4 */
  --text-base: 1rem;       /* 16   */
  --text-md:   1.25rem;    /* 20   */
  --text-lg:   1.5625rem;  /* 25   */
  --text-xl:   1.953rem;   /* 31   */
  --text-2xl:  2.441rem;   /* 39   */
  --text-3xl:  3.052rem;   /* 49   */
  --text-display:   clamp(2.75rem, 4.5vw + 1rem, 4.75rem);
  --text-display-s: clamp(2.25rem, 3vw + 1rem, 3.4rem);

  /* ---- Ритм / пространство (4pt) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ---- Движение ---- */
  --dur-short: 140ms;
  --dur-med:   280ms;
  --dur-long:  600ms;
  --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);

  /* ---- Радиусы / слои ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --z-sticky: 40;
  --z-nav:    45;
  --z-preview: 60;
}

/* ============ Переключатель фирменного красного (для показа заказчику) ============
   Вариант «яркий красный с логотипа» #B60000 — теплее и ярче. */
:root[data-red="bright"] {
  --color-accent:      oklch(48% 0.205 28);  /* ≈ #B60000 */
  --color-accent-deep: oklch(40% 0.18  28);
  --color-accent-soft: oklch(48% 0.205 28 / 0.10);
  --color-focus:       oklch(53% 0.22  28);
}

/* Терракота — тёплый кирпично-оранжевый, самый «земляной» из акцентов */
:root[data-red="terracotta"] {
  --color-accent:      oklch(50% 0.13 40);
  --color-accent-deep: oklch(43% 0.11 40);
  --color-accent-soft: oklch(50% 0.13 40 / 0.10);
  --color-focus:       oklch(55% 0.15 40);
}

/* Вишня — классический насыщенный красный, средней глубины */
:root[data-red="cherry"] {
  --color-accent:      oklch(45% 0.17 25);
  --color-accent-deep: oklch(38% 0.145 25);
  --color-accent-soft: oklch(45% 0.17 25 / 0.10);
  --color-focus:       oklch(50% 0.19 25);
}

/* Марсала — приглушённый винный, ближе к сливе */
:root[data-red="marsala"] {
  --color-accent:      oklch(38% 0.10 15);
  --color-accent-deep: oklch(31% 0.085 15);
  --color-accent-soft: oklch(38% 0.10 15 / 0.10);
  --color-focus:       oklch(44% 0.13 15);
}

/* Малина — холоднее и «розовее», ягодный красный */
:root[data-red="raspberry"] {
  --color-accent:      oklch(44% 0.16 10);
  --color-accent-deep: oklch(37% 0.135 10);
  --color-accent-soft: oklch(44% 0.16 10 / 0.10);
  --color-focus:       oklch(49% 0.18 10);
}

/* ============ Варианты заднего фона (для показа заказчику) ============
   Все — светлая тёплая «ремесленная» гамма. Правят бумагу целиком. */

/* Овсяный — заметно кремовее, тёплее */
:root[data-bg="oat"] {
  --color-paper:   oklch(95%   0.018 78);
  --color-paper-2: oklch(92.5% 0.021 76);
  --color-paper-3: oklch(89.5% 0.024 74);
  --color-rule:    oklch(84%   0.016 74);
  --color-rule-2:  oklch(88%   0.013 74);
}

/* Песочный — глубже и насыщеннее, тон дерева */
:root[data-bg="sand"] {
  --color-paper:   oklch(92.5% 0.024 74);
  --color-paper-2: oklch(89.5% 0.027 72);
  --color-paper-3: oklch(86%   0.030 70);
  --color-rule:    oklch(80%   0.020 72);
  --color-rule-2:  oklch(85%   0.016 72);
}

/* Грейж — спокойнее, уводит в нейтрально-серый тёплый */
:root[data-bg="greige"] {
  --color-paper:   oklch(95%   0.006 95);
  --color-paper-2: oklch(92%   0.008 95);
  --color-paper-3: oklch(88.5% 0.010 92);
  --color-rule:    oklch(83%   0.007 92);
  --color-rule-2:  oklch(88%   0.006 92);
}

/* Лён — воздушнее, ближе к белому, но тёплый */
:root[data-bg="linen"] {
  --color-paper:   oklch(97.5% 0.009 76);
  --color-paper-2: oklch(95%   0.012 74);
  --color-paper-3: oklch(92%   0.015 72);
  --color-rule:    oklch(86%   0.011 74);
  --color-rule-2:  oklch(90%   0.008 74);
}

/* Глина — тёплый терракотово-розоватый оттенок, ближе к дереву/керамике */
:root[data-bg="clay"] {
  --color-paper:   oklch(94%   0.020 55);
  --color-paper-2: oklch(91%   0.023 54);
  --color-paper-3: oklch(87.5% 0.026 52);
  --color-rule:    oklch(82%   0.018 54);
  --color-rule-2:  oklch(87%   0.014 54);
}

/* Шалфей — приглушённый тёплый серо-зелёный, спокойный «ремесленный» тон */
:root[data-bg="sage"] {
  --color-paper:   oklch(94.5% 0.014 135);
  --color-paper-2: oklch(91.5% 0.016 133);
  --color-paper-3: oklch(88%   0.018 130);
  --color-rule:    oklch(82%   0.014 132);
  --color-rule-2:  oklch(87%   0.010 132);
}

/* Туман — прохладный светло-серый, самый нейтральный из вариантов */
:root[data-bg="fog"] {
  --color-paper:   oklch(95.5% 0.005 240);
  --color-paper-2: oklch(92.5% 0.006 240);
  --color-paper-3: oklch(89%   0.008 240);
  --color-rule:    oklch(83%   0.006 240);
  --color-rule-2:  oklch(88%   0.005 240);
}