/* Insta-Editor design tokens + Inter (SPEC 3.2, 5.1). Shared contract with the tools (build/tools-src): the tools use
   only the --ie-* tokens of the first block; --s-* tokens are for the site shell.
   Theme: light by default, dark from prefers-color-scheme until the visitor chooses; the choice is stored in
   localStorage "ie_theme" (dark|light) and applied as html[data-theme] before the first paint.
   --ie-accent is the colour of links, focus rings and primary buttons; --ie-accent-text is the text ON --ie-accent
   (contrast >= 4.5:1 both ways in both themes). --ie-accent-2 (violet) is the secondary accent (also >= 4.5:1 as text).
   Inter: SIL Open Font License 1.1 (fonts/OFL-Inter.txt). */

@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.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+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-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-cyrillic-wght-normal.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-display: swap; font-weight: 100 900;
  src: url(fonts/inter-greek-wght-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  color-scheme: light;
  /* shared with the tools */
  --ie-bg: #fbfafc;
  --ie-surface: #ffffff;
  --ie-surface-2: #f4f2f7;
  --ie-border: #e6e3ec;
  --ie-text: #17151c;
  --ie-text-muted: #5d5866;
  --ie-accent: #cf2f36;
  --ie-accent-text: #ffffff;
  --ie-accent-soft: #ffeded;
  --ie-accent-2: #7c3aed;
  --ie-warn: #a15c07;
  --ie-danger: #c0262d;
  --ie-success: #1d7a46;
  --ie-radius: 16px;
  --ie-radius-sm: 10px;
  --ie-shadow: 0 1px 2px rgba(23, 21, 28, .05), 0 8px 24px -8px rgba(23, 21, 28, .12);
  --ie-font: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* site only */
  --s-coral: #ff5a5f;              /* brand coral (decorative: never text on white) */
  --s-accent-hover: #b0252c;
  --s-accent-2-soft: #f1eaff;
  --s-border-strong: #d4cfdc;
  --s-header-bg: rgba(251, 250, 252, .86);
  --s-shadow-lg: 0 2px 4px rgba(23, 21, 28, .04), 0 24px 48px -12px rgba(23, 21, 28, .18);
  --s-glow: radial-gradient(48% 90% at 18% 0%, rgba(255, 90, 95, .13), rgba(255, 90, 95, 0) 70%),
            radial-gradient(42% 80% at 88% 10%, rgba(124, 58, 237, .10), rgba(124, 58, 237, 0) 70%);
  --s-band: linear-gradient(135deg, #fff3f1 0%, #f6f0ff 100%);
  /* group colours: [text/icon, soft background] */
  --s-g-editor: #c62f35; --s-g-editor-bg: #ffeded;
  --s-g-design: #6d28d9; --s-g-design-bg: #f1eaff;
  --s-g-text: #1d5fd1; --s-g-text-bg: #e8f0ff;
  --s-g-download: #0b7a5c; --s-g-download-bg: #e1f5ee;
  --s-g-profile: #b0480e; --s-g-profile-bg: #fdeee2;
  --s-g-guides: #4a4860; --s-g-guides-bg: #efedf4;
}

/* dark: system preference (until chosen) or explicit choice (same values in both blocks) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ie-bg: #0f0f14;
    --ie-surface: #17161d;
    --ie-surface-2: #201e28;
    --ie-border: #2d2b37;
    --ie-text: #f3f1f6;
    --ie-text-muted: #a3a3b2;
    --ie-accent: #ff7a7f;
    --ie-accent-text: #2a0709;
    --ie-accent-soft: rgba(255, 122, 127, .14);
    --ie-accent-2: #a98bfa;
    --ie-warn: #f2b45a;
    --ie-danger: #ff8a8a;
    --ie-success: #5fd38d;
    --ie-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(0, 0, 0, .5);
    --s-accent-hover: #ffa2a5;
    --s-accent-2-soft: rgba(167, 139, 250, .15);
    --s-border-strong: #3c3948;
    --s-header-bg: rgba(15, 15, 20, .84);
    --s-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -12px rgba(0, 0, 0, .65);
    --s-glow: radial-gradient(48% 90% at 18% 0%, rgba(255, 90, 95, .10), rgba(255, 90, 95, 0) 70%),
              radial-gradient(42% 80% at 88% 10%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 70%);
    --s-band: linear-gradient(135deg, rgba(255, 90, 95, .10) 0%, rgba(124, 58, 237, .12) 100%);
    --s-g-editor: #ff8f93; --s-g-editor-bg: rgba(255, 122, 127, .14);
    --s-g-design: #c4a6ff; --s-g-design-bg: rgba(167, 139, 250, .15);
    --s-g-text: #8fb2ff; --s-g-text-bg: rgba(110, 150, 255, .15);
    --s-g-download: #5fd3a8; --s-g-download-bg: rgba(80, 200, 160, .14);
    --s-g-profile: #ffab7a; --s-g-profile-bg: rgba(255, 140, 80, .14);
    --s-g-guides: #cfcde0; --s-g-guides-bg: rgba(200, 198, 220, .10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ie-bg: #0f0f14;
  --ie-surface: #17161d;
  --ie-surface-2: #201e28;
  --ie-border: #2d2b37;
  --ie-text: #f3f1f6;
  --ie-text-muted: #a3a3b2;
  --ie-accent: #ff7a7f;
  --ie-accent-text: #2a0709;
  --ie-accent-soft: rgba(255, 122, 127, .14);
  --ie-accent-2: #a98bfa;
  --ie-warn: #f2b45a;
  --ie-danger: #ff8a8a;
  --ie-success: #5fd38d;
  --ie-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --s-accent-hover: #ffa2a5;
  --s-accent-2-soft: rgba(167, 139, 250, .15);
  --s-border-strong: #3c3948;
  --s-header-bg: rgba(15, 15, 20, .84);
  --s-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -12px rgba(0, 0, 0, .65);
  --s-glow: radial-gradient(48% 90% at 18% 0%, rgba(255, 90, 95, .10), rgba(255, 90, 95, 0) 70%),
            radial-gradient(42% 80% at 88% 10%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 70%);
  --s-band: linear-gradient(135deg, rgba(255, 90, 95, .10) 0%, rgba(124, 58, 237, .12) 100%);
  --s-g-editor: #ff8f93; --s-g-editor-bg: rgba(255, 122, 127, .14);
  --s-g-design: #c4a6ff; --s-g-design-bg: rgba(167, 139, 250, .15);
  --s-g-text: #8fb2ff; --s-g-text-bg: rgba(110, 150, 255, .15);
  --s-g-download: #5fd3a8; --s-g-download-bg: rgba(80, 200, 160, .14);
  --s-g-profile: #ffab7a; --s-g-profile-bg: rgba(255, 140, 80, .14);
  --s-g-guides: #cfcde0; --s-g-guides-bg: rgba(200, 198, 220, .10);
}

/* Thai, Japanese, Korean, Chinese: system fonts (Inter has no glyphs for them) */
:root:lang(th) { --ie-font: system-ui, -apple-system, 'Segoe UI', 'Leelawadee UI', Tahoma, 'Noto Sans Thai', sans-serif; }
:root:lang(ja) { --ie-font: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo, 'Noto Sans JP', sans-serif; }
:root:lang(ko) { --ie-font: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
:root:lang(zh-Hans) { --ie-font: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }