/*
 * 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 or luminous night 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;

  /* 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;
  }
}