/* Kreatorskaya — design tokens
 *
 * The single source of colour, type, and size in the project.
 * Rule: components contain no literal colours or fonts — only var(--*).
 * A redesign is a swap of values in this file, with no component edits.
 *
 * Version: kreatory-1 (August 2026) — the design system the owner supplied,
 * `design/reference/design-system.html`. Its palette was measured off the
 * reference page by area, and the role each colour plays follows from how much
 * of the screen it occupied: cream is the ground at 53%, olive and amber are
 * support, and pink — under one percent — is the accent that every call to
 * action is painted in.
 *
 * Two rules from that document are load-bearing and easy to break by accident:
 *   - Text on a brand fill is ALWAYS the warm dark, never white. White on the
 *     olive, the amber, the orange or the pink tops out at 3.36:1.
 *   - The olive is support and the badge; it is not the accent any more. The
 *     two live in separate token families below for exactly that reason.
 */

:root {
  /* ---- surfaces ---- */
  --color-ground:          #FCF9EE;  /* page background — the 53% */
  --color-ground-alt:      #F5F1E2;  /* admin background, sunken areas */
  --color-surface:         #FFFFFF;  /* cards, panels */
  --color-surface-muted:   #F5F1E2;  /* chips, tags, secondary plates */
  --color-placeholder:     #E8E2CE;  /* preview and media placeholders */
  --color-inverse:         #1A1712;  /* dark blocks; warm, never #000 */
  --color-inverse-soft:    #2E2B24;  /* active item in a dark panel */

  /* ---- text ---- */
  --color-text:            #1A1712;
  --color-text-secondary:  #635D50;
  --color-text-muted:      #7A7260;
  --color-text-on-dark:    #FCF9EE;
  --color-text-on-dark-muted: #ADA593;
  /* On any brand fill — pink, olive, amber, orange. 6.17:1 on the pink. */
  --color-on-accent:       #1A1712;
  --color-link:            #B81F55;
  /* 16.95:1. The accent is 2.75:1 on the ground — an accent-coloured focus
     ring is a ring some people cannot see (#42 review). */
  --color-focus-ring:      #1A1712;
  /* Behind a sheet or a dialog. Warm dark in both themes: a scrim that flips
     with the theme stops being a scrim. */
  --color-scrim:           rgba(26, 23, 18, 0.4);

  /* ---- borders ---- */
  --color-border:          #E8E2CE;
  --color-border-strong:   #7A7260;
  --color-border-control:  #D3CCB4;

  /* ---- accent: pink. Every call to action, and nothing else ---- */
  --color-accent:          #ED6D99;
  --color-accent-hover:    #F18BAA;
  --color-accent-press:    #E64680;
  --color-accent-soft:     #FDF1F5;  /* tint plates, selected chips */
  --color-accent-border:   #F7BACE;
  --color-accent-ink:      #B81F55;  /* accent-coloured text on a light ground */
  --color-accent-on-dark:  #F18BAA;  /* the accent ON the inverse block —
                                        which is dark here and cream in the
                                        dark theme, so this flips too */

  /* ---- olive: the course badge, and large support blocks ---- */
  --color-olive:           #A4AD00;
  --color-olive-hover:     #BCC800;
  --color-olive-soft:      #F3F6C9;  /* the "выпускник курса" stripe */
  /* The ground of a graduate's whole card in the catalogue (#172). Lighter
     than the stripe on purpose: the stripe has to stay legible on top of it,
     and a card is a large area — at the stripe's strength the grid turns into
     a wall of olive. */
  --color-olive-wash:      #F1F6CF;
  --color-olive-border:    #E6ED93;
  --color-olive-ink:       #4A4E00;  /* text on olive-soft */
  --color-olive-light:     #BCC800;  /* the leaf on the badge */
  --color-olive-on-dark:   #D2DC4E;
  --color-olive-dim:       #666B00;  /* second series in charts */

  /* ---- plum: the paid boost on a card (#88) ----
     A second fruit beside the olive, and deliberately a different hue: the
     olive is earned and the plum is bought, and a card can wear both at once.
     The chilli of a promoted project (#90) joins the same family. */
  --color-plum:            #8E3F7A;
  --color-plum-soft:       #F6E4F1;  /* the "поднято" stripe */
  --color-plum-ink:        #5C2450;  /* text on plum-soft — 9.48:1 */
  --color-plum-dim:        #6B2D5B;

  /* ---- chilli: a promoted project at the top of the feed (#90) ----
     The third fruit: olive is earned, plum is bought on a card, chilli is
     bought on a brief. Deliberately hot and deliberately not the accent pink,
     which every call to action already uses. */
  --color-chilli:          #C2321B;
  --color-chilli-soft:     #FBE3DE;  /* the "поднято" stripe on a project */
  --color-chilli-ink:      #7A1C0C;  /* text on chilli-soft — 8.58:1 */
  --color-chilli-dim:      #9B2714;

  /* ---- amber: cards with a number on them, notice plates ---- */
  --color-amber:           #F69F07;
  --color-amber-soft:      #FDEDCF;
  --color-amber-ink:       #6F4403;

  /* ---- status ---- */
  --color-success:         #1F8A4C;
  --color-success-soft:    #DCF3E4;
  --color-success-ink:     #166B3A;
  --color-warning:         #9A5F04;  /* readable warning TEXT, not the fill */
  --color-warning-soft:    #FDEDCF;
  --color-warning-ink:     #6F4403;
  --color-error:           #DC2626;
  --color-error-soft:      #FBE0E0;
  --color-error-ink:       #B01212;
  --color-info:            #2563EB;
  --color-info-soft:       #DEE8FE;
  --color-info-ink:        #1D4ED8;
  --color-busy-soft:       #FDEDCF;  /* "busy until …" */
  --color-busy-ink:        #6F4403;

  /* ---- fonts ---- */
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body:    "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---- text sizes ----
     The floor is 12px: below it Cyrillic falls apart, and the design system
     forbids it outright. */
  --text-xs:   12px;   /* overline, the markers that ride on the avatar */
  --text-sm:   14px;   /* captions, metadata, footnotes */
  --text-base: 16px;   /* default UI size */
  --text-md:   18px;   /* long-form body */
  --text-lg:   20px;
  --text-xl:   22px;   /* lead paragraph */
  --text-2xl:  26px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  48px;
  --text-6xl:  64px;   /* home-page hero only */

  /* ---- weights. Two per layout, never three ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;  /* display and headings, per the system */

  /* ---- letter spacing ---- */
  --tracking-display: -0.025em;  /* large Unbounded headings */
  --tracking-hero:    -0.03em;
  --tracking-label:    0.12em;   /* UPPERCASE LABELS */

  /* ---- line height ---- */
  --leading-tight: 1.0;
  --leading-snug:  1.15;
  --leading-body:  1.6;

  /* ---- spacing, step of 4 ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- radii. A square corner does not occur in this brand ----
     Named as the source document names them, `--r-*`, and deliberately NOT
     `--radius-*`: shadcn's own `@theme inline` block defines `--radius-sm/md/
     lg/xl` from a single `--radius`, and those win at build time. Under the
     old 2px/3px set the collision was invisible; at 8/16/32 it silently threw
     the whole scale away (#42 review). */
  --r-sm:   8px;   /* chips, inputs, small plates */
  --r-md:   16px;  /* cards, panels */
  --r-lg:   32px;  /* large blocks */
  --r-full: 999px; /* buttons, avatars, counters */

  /* ---- borders and shadows ----
     Warm, never grey, and never more than one step at a time. Flat fills and
     section bands cast none at all. */
  --border-width: 1px;
  --shadow-tint: 123, 33, 3;
  --shadow-a1: 0.10;
  --shadow-a2: 0.12;
  --shadow-a3: 0.16;
  --shadow-a4: 0.22;
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgba(var(--shadow-tint), var(--shadow-a1));
  --shadow-2: 0 4px 12px rgba(var(--shadow-tint), var(--shadow-a2));
  --shadow-3: 0 12px 32px rgba(var(--shadow-tint), var(--shadow-a3));
  --shadow-4: 0 24px 64px rgba(var(--shadow-tint), var(--shadow-a4));

  /* ---- control sizes ---- */
  --control-height:        44px;  /* minimum touch target on the phone */
  --control-height-compact: 36px; /* desktop buttons in dense blocks */
  --avatar-sm: 34px;
  --avatar-md: 52px;
  --avatar-lg: 108px;

  /* ---- grid ---- */
  --page-max:     1440px;
  --page-pad:     48px;
  --page-pad-mobile: 20px;
  --sidebar-width: 224px;
  --filters-width: 268px;
}

/* Dark theme. The design system defines it in full — "тёмный + крем" is one of
   its five approved pairs, used for stories and final slides as well as the
   site. Shadows lose their warm tint here: a warm glow on a near-black ground
   reads as a smudge. */
[data-theme="dark"] {
  --color-ground:          #100E0B;
  --color-ground-alt:      #0A0907;
  --color-surface:         #1A1712;
  --color-surface-muted:   #2E2B24;
  --color-placeholder:     #2E2B24;
  --color-inverse:         #FCF9EE;
  --color-inverse-soft:    #E8E2CE;

  --color-text:            #FCF9EE;
  --color-text-secondary:  #D3CCB4;
  --color-text-muted:      #ADA593;
  --color-text-on-dark:    #1A1712;
  --color-text-on-dark-muted: #635D50;
  --color-on-accent:       #1A1712;
  --color-link:            #F18BAA;
  --color-focus-ring:      #FCF9EE;
  --color-scrim:           rgba(10, 9, 7, 0.6);

  --color-border:          #48443A;
  --color-border-strong:   #7A7260;
  --color-border-control:  #48443A;

  --color-accent:          #ED6D99;
  --color-accent-hover:    #F18BAA;
  --color-accent-press:    #E64680;
  --color-accent-soft:     #3A1428;
  --color-accent-border:   #5C0D28;
  --color-accent-ink:      #F293B2;
  /* The inverse block is cream in this theme, so what sits on it goes dark. */
  --color-accent-on-dark:  #B81F55;

  --color-olive:           #BCC800;
  --color-olive-hover:     #D2DC4E;
  --color-olive-soft:      #2F3200;
  --color-olive-wash:      #2A2E0E;
  --color-olive-border:    #4A4E00;
  --color-olive-ink:       #D2DC4E;
  --color-olive-light:     #BCC800;
  --color-olive-on-dark:   #666B00;
  --color-olive-dim:       #868E00;

  --color-plum:            #C56FAE;
  --color-plum-soft:       #331129;
  --color-plum-ink:        #E7A7D3;
  --color-plum-dim:        #A9538F;

  --color-chilli:          #F0705A;
  --color-chilli-soft:     #331009;
  --color-chilli-ink:      #F5A897;
  --color-chilli-dim:      #C2503C;

  --color-amber:           #F7B02E;
  --color-amber-soft:      #2E2004;
  --color-amber-ink:       #F9C664;

  --color-success:         #3FBE74;
  --color-success-soft:    #123524;
  --color-success-ink:     #3FBE74;
  --color-warning:         #F7B02E;
  --color-warning-soft:    #2E2004;
  --color-warning-ink:     #F9C664;
  --color-error:           #F87171;
  --color-error-soft:      #3A1010;
  --color-error-ink:       #F87171;
  --color-info:            #7FA9F9;
  --color-info-soft:       #101F3E;
  --color-info-ink:        #7FA9F9;
  --color-busy-soft:       #2E2004;
  --color-busy-ink:        #F9C664;

  /* Black, and much heavier: a warm glow on a near-black ground reads as a
     smudge, and a 10% shadow on it is not visible at all. */
  --shadow-tint: 0, 0, 0;
  --shadow-a1: 0.40;
  --shadow-a2: 0.45;
  --shadow-a3: 0.50;
  --shadow-a4: 0.55;
}