/*
 * Primitive layer: the ONLY file in product CSS allowed to hold raw values
 * (guarded by common/tests/test_visual_domains_no_new_hex.py). Everything else
 * consumes the semantic roles in tokens/semantic.css.
 *
 * Palette: warm paper canvas, unchanged product accents. The neutral ramp is a
 * bone-white sheet with warm near-black ink; the brand blue, the green/amber/red
 * feedback ramps and the iridescent wallpaper quartet are product identity and
 * stay as they were. Every neutral text step is checked against the canvas for
 * WCAG AA by common/tests/test_visual_base_theme_contract.py.
 */

/* --------------------------------------------------------------- typography */
/* Self-hosted (CSP keeps font-src 'self'); files + licence in static/fonts.
   Cyrillic and Latin ship separately so a page downloads only what it renders. */

@font-face {
  font-family: "Source Serif Variable";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../../../fonts/source-serif-cyrillic.510c90fa5758.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Source Serif Variable";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../../../fonts/source-serif-latin.197cc326af6d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../../fonts/inter-cyrillic.de93fdc85e3d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ui-primitive-white: #ffffff;
  --ui-primitive-black: #000000;

  /* Fixed readable-ink for author-colored content (ContentColor and
     RichContentTone pair it with white). Deliberately theme-independent;
     mirrors the rgb(17, 24, 39) literal in static/js/content_color.js and
     cabinet/tinymce-content-tone.js. */
  --ui-primitive-content-ink: #111827;

  /* Pure-gray ramp for the dim ("dark") theme surfaces and header accents. */
  --ui-primitive-gray-100: #f4f4f4;
  --ui-primitive-gray-150: #eeeeee;
  --ui-primitive-gray-200: #e0e0e0;
  --ui-primitive-gray-250: #dedede;
  --ui-primitive-gray-300: #cfcfcf;
  --ui-primitive-gray-400: #bdbdbd;
  --ui-primitive-gray-800: #424245;

  /* Night ramp for the midnight (true dark) theme: neutral graphite surfaces
     (a whisper of cool tint, perceptually gray — not navy) plus
     light text steps. 950 is the deepest chrome, 600 the strongest border. */
  --ui-primitive-night-950: #0a0a0c;
  --ui-primitive-night-900: #17171a;
  --ui-primitive-night-850: #1f1f23;
  --ui-primitive-night-800: #27272c;
  --ui-primitive-night-700: #333339;
  --ui-primitive-night-600: #45454d;
  --ui-primitive-night-300: #a2a2ab;
  --ui-primitive-night-200: #c7c7ce;
  --ui-primitive-night-100: #e0e0e5;
  --ui-primitive-night-50: #f2f2f5;

  /* SitePattern wallpaper stops (owner: css/ui/components/site_pattern.css).
     Every pattern uses this single branded palette; theme packs choose the
     regular, luminous night or pastel (pink pack) variant while pattern packs
     only swap artwork.
     The iridescent quartet is the product's signature and stays cool even on
     the warm paper canvas. */
  --ui-primitive-pattern-glow-teal: #0fa886;
  --ui-primitive-pattern-glow-blue: #2f7fc4;
  --ui-primitive-pattern-glow-violet: #7d56c2;
  --ui-primitive-pattern-glow-rose: #cf4f7e;
  --ui-primitive-pattern-glow-teal-bright: #1fd0a0;
  --ui-primitive-pattern-glow-blue-bright: #2e9fe6;
  --ui-primitive-pattern-glow-violet-bright: #8a63e8;
  --ui-primitive-pattern-glow-rose-bright: #e2557f;
  /* Pastel variant for the pink theme pack: the same four-stop gradient role,
     softened toward candy pink / lilac / peach. Still a theme palette — no
     pattern pack may read these. */
  --ui-primitive-pattern-pastel-pink: #f06ba8;
  --ui-primitive-pattern-pastel-lilac: #b48be6;
  --ui-primitive-pattern-pastel-peach: #f7a38f;
  --ui-primitive-pattern-pastel-rose: #e0558f;

  /* Blush ramp: the pink theme's canvas and borders. 50 is the sheet, 100 the
     desk, 150 hovered cards; 500 is the muted-text step that still clears AA
     on 50/100/150 (neutral-500 drops to 4.29:1 on blush-100). */
  --ui-primitive-blush-50: #fffafc;
  --ui-primitive-blush-100: #fdf0f5;
  --ui-primitive-blush-150: #fbe6ef;
  --ui-primitive-blush-200: #f3d2e0;
  --ui-primitive-blush-300: #e8b6cb;
  --ui-primitive-blush-500: #71666b;

  /* Pink accent ramp (pink theme links, tabs and buttons). 500 clears AA as
     text on blush-50/100; the rgb copies feed the Bootstrap link bridge in
     css/utilities.css and must stay in lockstep with the hex steps. */
  --ui-primitive-pink-50: #fdebf3;
  --ui-primitive-pink-100: #fad3e4;
  --ui-primitive-pink-500: #c8286f;
  --ui-primitive-pink-600: #a81e5c;
  --ui-primitive-pink-700: #86174a;
  --ui-primitive-pink-500-rgb: 200, 40, 111;
  --ui-primitive-pink-600-rgb: 168, 30, 92;

  /* Paper ramp: the light theme's canvas, borders and text weights. 50 is the
     sheet, 900 the ink. 500 is the lightest step that still clears AA (4.5:1)
     as text on both the sheet and pure white. */
  --ui-primitive-neutral-50: #faf9f5;
  --ui-primitive-neutral-100: #f4f2ea;
  --ui-primitive-neutral-200: #e8e4d8;
  --ui-primitive-neutral-300: #d6d1c2;
  --ui-primitive-neutral-400: #a8a294;
  --ui-primitive-neutral-500: #75736a;
  --ui-primitive-neutral-600: #55534c;
  --ui-primitive-neutral-700: #3b3934;
  --ui-primitive-neutral-800: #26241f;
  --ui-primitive-neutral-900: #141413;
  --ui-primitive-neutral-900-rgb: 20, 20, 19;

  /* Brand ramp (product blue). Deliberately unchanged by the paper-canvas
     rework: links, active tabs and the action accent are brand identity.
     200/300 are the dark-canvas accent steps (link text on night surfaces). */
  --ui-primitive-brand-50: #eff6ff;
  --ui-primitive-brand-100: #dbeafe;
  --ui-primitive-brand-200: #a3ccff;
  --ui-primitive-brand-300: #66adff;
  --ui-primitive-brand-500: #0071e3;
  --ui-primitive-brand-600: #005bb5;
  --ui-primitive-brand-700: #004494;
  /* Bootstrap keys links off rgb triplets (rgba(var(--bs-link-color-rgb), …)),
     so the bridge in css/utilities.css needs these channel copies. Keep them in
     lockstep with the hex steps above. */
  --ui-primitive-brand-500-rgb: 0, 113, 227;
  --ui-primitive-brand-600-rgb: 0, 91, 181;

  /* Button-only aurora accent, sampled from the wallpaper's blue -> violet
     range. Links/tabs keep the brand ramp; controls avoid the green-teal cast. */
  --ui-primitive-control-aurora-50: #f2f4ff;
  --ui-primitive-control-aurora-100: #e3e7ff;
  --ui-primitive-control-aurora-200: #c8d0ff;
  --ui-primitive-control-aurora-300: #9faaf3;
  --ui-primitive-control-aurora-500: #6774d8;
  --ui-primitive-control-aurora-600: #5561c4;
  --ui-primitive-control-aurora-700: #424aa3;

  /* Feedback ramps stay the product's green / amber / red. The 400 steps are
     the readable accents on night surfaces (midnight theme). */
  --ui-primitive-success-50: #ecfdf5;
  --ui-primitive-success-400: #34d399;
  --ui-primitive-success-500: #10b981;
  --ui-primitive-success-600: #059669;
  --ui-primitive-warning-50: #fffbeb;
  --ui-primitive-warning-400: #fbbf24;
  --ui-primitive-warning-500: #f59e0b;
  --ui-primitive-warning-600: #d97706;
  --ui-primitive-danger-50: #fef2f2;
  --ui-primitive-danger-400: #f87171;
  --ui-primitive-danger-500: #ef4444;
  --ui-primitive-danger-600: #dc2626;

  /* Shadows are warm and directional: a hairline contact edge plus a wide,
     low-opacity spread, so a raised surface reads as paper lifted off paper
     rather than a gray box with a drop shadow. */
  --ui-primitive-shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06);
  --ui-primitive-shadow-md: 0 12px 28px -18px rgba(20, 20, 19, 0.38), 0 2px 6px -2px rgba(20, 20, 19, 0.08);
  --ui-primitive-shadow-lg: 0 28px 64px -32px rgba(20, 20, 19, 0.42), 0 4px 12px -6px rgba(20, 20, 19, 0.1);
  --ui-primitive-focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.32);

  --ui-space-0: 0;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-10: 2.5rem;
  --ui-space-12: 3rem;

  /* Radius scale. The previous 2–8px range made every surface read as a flat
     rectangle; these steps give panels and cards a visible, consistent corner
     while controls stay compact. */
  --ui-radius-xs: 0.25rem;
  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
  --ui-radius-xl: 1rem;
  --ui-radius-pill: 999px;

  --ui-motion-duration-fast: 160ms;
  --ui-motion-duration-normal: 220ms;
  --ui-motion-duration-slow: 300ms;
  --ui-motion-easing-standard: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ui-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  --ui-font-sans: "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-font-display: "Source Serif Variable", "Iowan Old Style", "Palatino Linotype",
    Georgia, "Times New Roman", serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* Author-written lesson HTML (RichContentStyle) keeps the reading face it was
     authored against. The interface face must not reflow existing content. */
  --ui-font-content: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-motion-duration-fast: 1ms;
    --ui-motion-duration-normal: 1ms;
    --ui-motion-duration-slow: 1ms;
  }
}