/* ============================================================
   Design tokens. 
   Load before every other stylesheet.
   ============================================================ */

/* TODO: Integrate */

:root {
  /* ---- Brand ---- */
  --color-brand: #8f4ad8;          /* fills, focus rings, icons, date band, heart */
  --color-brand-strong: #6b3bb5;   /* links, selected chips and tiles, card "when" text */
  --color-brand-dark: #6f2fb9;     /* end of the brand gradient */
  --color-brand-deep: #4b2a8a;     /* text on brand tints (calendar range) */
  --color-on-brand: #ffffff;
  --color-on-brand-muted: #e4d7ff; /* secondary text on a brand fill */
  --gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
  --gradient-cta: linear-gradient(135deg, #9f5cee, #6f2cc4); /* header "Регистрация" */

  /* ---- Surfaces ---- */
  --color-bg: #f6f5f9;             /* page background */
  --color-surface: #ffffff;        /* header, cards, panels, inputs */
  --color-surface-frost: rgba(255, 255, 255, 0.94); /* pills and buttons over photos */
  --color-media: #ece6f5;          /* image area while it loads */
  --color-tint: #f4effb;           /* chips, search field, quiet buttons */
  --color-tint-hover: #e9ddfb;     /* merges #ebe2f8, #ece3fa */

  /* ---- Text ---- */
  --color-ink: #1b1b24;            /* titles, body, prices */
  --color-ink-heading: #2c2438;    /* day headings */
  --color-ink-body: #3c3450;       /* chip labels, long-form text */
  --color-ink-secondary: #4e3b66;  /* inactive tabs, secondary buttons */
  --color-ink-meta: #5b5070;       /* card meta line, captions */
  --color-ink-muted: #6e6388;      /* hints, counts, subtitles; merges #6f6880, #6d5d88 */
  --color-ink-faint: #8a7ca2;      /* icons in fields; merges #8a829e */
  --color-placeholder: #9a92af;
  --color-ink-disabled: #a79fba;
  --color-disabled: #cbc5d8;       /* disabled fills and past calendar days */

  /* ---- Borders ---- */
  --color-border: #e6daf6;         /* controls and inputs; merges #e3d9f2 */
  --color-divider: #efeaf6;        /* section dividers, header line; merges #eee9f8, #ece5f6 */
  --color-border-strong: #d9ccf0;
  --color-border-hover: #c4afea;
  --color-border-active: #b99be8;
  --color-rule: #e0dce8;           /* rule under day headings */

  /* ---- Focus and overlays ---- */
  --color-focus: var(--color-brand);
  --focus-ring: 0 0 0 3px rgba(143, 74, 216, 0.16);
  --color-scrim: rgba(27, 18, 51, 0.45);

  /* ---- Status ---- */
  --color-success: #1f8a5e;
  --color-warning: #a16207;
  --color-danger: #d0503f;

  /* ---- Categories ---- */
  --cat-music: #8f4ad8;       --cat-music-from: #f1e6ff;      --cat-music-to: #d4b8fb;      --cat-music-ink: #8f4ad8;
  --cat-theatre: #e0645a;     --cat-theatre-from: #ffece8;    --cat-theatre-to: #f7c1b6;    --cat-theatre-ink: #d0503f;
  --cat-sport: #1f9d6b;       --cat-sport-from: #e4f7ee;      --cat-sport-to: #b3e4cc;      --cat-sport-ink: #1f8a5e;
  --cat-kids: #e89a12;        --cat-kids-from: #fff4dc;       --cat-kids-to: #ffd78a;       --cat-kids-ink: #c7800a;
  --cat-art: #d6559c;         --cat-art-from: #ffe8f3;        --cat-art-to: #f6bddb;        --cat-art-ink: #c0428a;
  --cat-show: #6f5bf2;        --cat-show-from: #ecebff;       --cat-show-to: #c7befe;       --cat-show-ink: #5b46e0;
  --cat-conference: #2b8fb3;  --cat-conference-from: #e3f3f9; --cat-conference-to: #b2d9ea; --cat-conference-ink: #237a9a;
  --cat-other: #7b7390;       --cat-other-from: #f1eff5;      --cat-other-to: #d6d0e2;      --cat-other-ink: #6e6388;

  /* ---- Typography ---- */
  --font-sans: Montserrat, 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Space Grotesk', Montserrat, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 22px;

  /* ---- Spacing ---- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* ---- Radii ---- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgba(43, 31, 68, 0.06), 0 12px 28px rgba(43, 31, 68, 0.08);
  --shadow-card-hover: 0 2px 6px rgba(43, 31, 68, 0.08), 0 22px 40px rgba(43, 31, 68, 0.16);
  --shadow-card-pressed: 0 1px 3px rgba(43, 31, 68, 0.12);
  --shadow-float: 0 4px 12px rgba(20, 10, 40, 0.2);
  --shadow-pill: 0 2px 8px rgba(20, 10, 40, 0.16);
  --shadow-segment: 0 1px 3px rgba(60, 30, 110, 0.16);
  --shadow-raised: 0 6px 16px rgba(45, 30, 70, 0.08);
  --shadow-panel: 0 18px 40px rgba(43, 31, 68, 0.08);
  --shadow-popover: 0 16px 40px rgba(34, 25, 60, 0.18);
  --shadow-sheet: 0 -12px 40px rgba(20, 10, 40, 0.25);
  --shadow-brand: 0 12px 30px rgba(118, 63, 178, 0.35);

  /* ---- Motion ---- */
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.3, 1.7, 0.5, 1);
  --dur-press: 120ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
  --dur-enter: 550ms;
}