/*
 * trans2audio design tokens and themes.
 * Every theme defines the SAME token set; components only ever use tokens, so themes change colour and mood
 * while layout, typography and brand recognition stay constant. Contrast of every text/background pair is
 * checked by tests/unit/themes.test.js (WCAG AA: 4.5:1 for text, 3:1 for UI boundaries).
 * Default: "auto" follows the system colour scheme (Classic Light / Midnight Dark) until the user picks a theme.
 */
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/fonts/poppins-devanagari-600-normal.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --space: 16px;
  --maxw: 1160px;
  --shadow: 0 1px 2px rgba(15, 27, 61, .06), 0 6px 24px rgba(15, 27, 61, .07);
  --shadow-lg: 0 10px 40px rgba(15, 27, 61, .14);
}

/* 1. Classic Light (default for light system preference) */
:root, [data-theme="classic"] {
  color-scheme: light;
  --bg: #F6F7FB; --surface: #FFFFFF; --surface-2: #EEF0F8; --border: #D5D9E8; --border-strong: #8B93AE;
  --text: #0F1B3D; --text-muted: #4A5372; --heading: #0F1B3D;
  --primary: #3346D3; --primary-hover: #2735A8; --on-primary: #FFFFFF; --primary-soft: #E6E9FC; --on-primary-soft: #1E2A8F;
  --accent: #C2410C; --accent-strong: #FF6A3D; --link: #2D3EC2; --focus: #C2410C;
  --success: #15703D; --success-soft: #E3F5EA; --warning: #8A5300; --warning-soft: #FFF3DC; --danger: #B42318; --danger-soft: #FDE8E7;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #EEF0FB 100%); --band: #0F1B3D; --on-band: #FFFFFF; --on-band-muted: #C9CEE4;
  --logo-ink: #0F1B3D; --logo-primary: #3346D3; --logo-accent: #FF6A3D;
}

/* 2. Midnight Dark (default for dark system preference) */
[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0B1020; --surface: #131A2E; --surface-2: #1B2440; --border: #2C3657; --border-strong: #6A759B;
  --text: #E8EBF7; --text-muted: #A9B1CF; --heading: #FFFFFF;
  --primary: #8B97FF; --primary-hover: #A7B0FF; --on-primary: #0B1020; --primary-soft: #222C55; --on-primary-soft: #C9CEFF;
  --accent: #FF8F6B; --accent-strong: #FF6A3D; --link: #A7B0FF; --focus: #FF8F6B;
  --success: #5FD394; --success-soft: #12301F; --warning: #F5B94D; --warning-soft: #33260E; --danger: #FF8A80; --danger-soft: #3A1513;
  --hero: linear-gradient(180deg, #131A2E 0%, #0B1020 100%); --band: #1B2440; --on-band: #FFFFFF; --on-band-muted: #C3C9E3;
  --logo-ink: #FFFFFF; --logo-primary: #9DA8FF; --logo-accent: #FF6A3D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 24px rgba(0, 0, 0, .35);
}

/* 3. Ocean Blue */
[data-theme="ocean"] {
  color-scheme: light;
  --bg: #F1F7FB; --surface: #FFFFFF; --surface-2: #E2EFF7; --border: #C7DCEA; --border-strong: #7895AA;
  --text: #0B2A3F; --text-muted: #3F5B70; --heading: #0B2A3F;
  --primary: #0B6E99; --primary-hover: #085677; --on-primary: #FFFFFF; --primary-soft: #DDF0F9; --on-primary-soft: #064563;
  --accent: #B4380E; --accent-strong: #FF6A3D; --link: #0A6389; --focus: #E2551F;
  --success: #12703C; --success-soft: #E1F4E8; --warning: #865200; --warning-soft: #FFF2D6; --danger: #B3261E; --danger-soft: #FCE8E6;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #E2F1F9 100%); --band: #0B2A3F; --on-band: #FFFFFF; --on-band-muted: #C2D7E5;
  --logo-ink: #0B2A3F; --logo-primary: #0B6E99; --logo-accent: #FF6A3D;
}

/* 4. Forest Green */
[data-theme="forest"] {
  color-scheme: light;
  --bg: #F3F7F2; --surface: #FFFFFF; --surface-2: #E5EFE3; --border: #CADBC6; --border-strong: #7A9475;
  --text: #13281A; --text-muted: #45594A; --heading: #13281A;
  --primary: #1F6E3C; --primary-hover: #17552E; --on-primary: #FFFFFF; --primary-soft: #DCEFE1; --on-primary-soft: #134726;
  --accent: #A3420E; --accent-strong: #E86A2E; --link: #1B6235; --focus: #D9601F;
  --success: #1F6E3C; --success-soft: #DCEFE1; --warning: #805000; --warning-soft: #FDF1D8; --danger: #B02A1E; --danger-soft: #FBE7E4;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #E6F1E4 100%); --band: #13281A; --on-band: #FFFFFF; --on-band-muted: #C5D6C8;
  --logo-ink: #13281A; --logo-primary: #1F6E3C; --logo-accent: #E86A2E;
}

/* 5. Warm Sunset */
[data-theme="sunset"] {
  color-scheme: light;
  --bg: #FFF7F1; --surface: #FFFFFF; --surface-2: #FDEBDD; --border: #F0D3BE; --border-strong: #A6806A;
  --text: #33170A; --text-muted: #6A4632; --heading: #33170A;
  --primary: #B4400F; --primary-hover: #8F320B; --on-primary: #FFFFFF; --primary-soft: #FDE3D3; --on-primary-soft: #7A2B09;
  --accent: #8A2D61; --accent-strong: #E05A2B; --link: #A33A0D; --focus: #8A2D61;
  --success: #1E6B3A; --success-soft: #E2F3E6; --warning: #7D4E00; --warning-soft: #FFF1D4; --danger: #A8211C; --danger-soft: #FCE6E4;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #FFE9DA 100%); --band: #33170A; --on-band: #FFFFFF; --on-band-muted: #EBCDBB;
  --logo-ink: #33170A; --logo-primary: #B4400F; --logo-accent: #E05A2B;
}

/* 6. Soft Lavender */
[data-theme="lavender"] {
  color-scheme: light;
  --bg: #F7F5FC; --surface: #FFFFFF; --surface-2: #EEE9F9; --border: #DAD1EF; --border-strong: #8E82AE;
  --text: #221A3D; --text-muted: #574D75; --heading: #221A3D;
  --primary: #6440C9; --primary-hover: #4E30A3; --on-primary: #FFFFFF; --primary-soft: #ECE5FC; --on-primary-soft: #43278F;
  --accent: #B0326E; --accent-strong: #FF6A3D; --link: #5B37BE; --focus: #D9467F;
  --success: #17703F; --success-soft: #E2F4E8; --warning: #855200; --warning-soft: #FFF2D7; --danger: #B0261F; --danger-soft: #FCE7E5;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #F0EAFC 100%); --band: #221A3D; --on-band: #FFFFFF; --on-band-muted: #D2CAE8;
  --logo-ink: #221A3D; --logo-primary: #6440C9; --logo-accent: #FF6A3D;
}

/* 7. Rose and Coral */
[data-theme="rose"] {
  color-scheme: light;
  --bg: #FFF6F7; --surface: #FFFFFF; --surface-2: #FCE8EC; --border: #F2CFD6; --border-strong: #A8808A;
  --text: #3A1420; --text-muted: #6E4250; --heading: #3A1420;
  --primary: #B8274F; --primary-hover: #931E3F; --on-primary: #FFFFFF; --primary-soft: #FDE2E8; --on-primary-soft: #7D1A36;
  --accent: #A8401B; --accent-strong: #FF6A3D; --link: #A82248; --focus: #E2551F;
  --success: #196B3C; --success-soft: #E1F3E7; --warning: #7F4F00; --warning-soft: #FFF1D5; --danger: #A61C1C; --danger-soft: #FDE5E5;
  --hero: linear-gradient(180deg, #FFFFFF 0%, #FDE6EB 100%); --band: #3A1420; --on-band: #FFFFFF; --on-band-muted: #ECCBD3;
  --logo-ink: #3A1420; --logo-primary: #B8274F; --logo-accent: #FF6A3D;
}

/* 8. High-Contrast Accessible */
[data-theme="contrast"] {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2F2; --border: #000000; --border-strong: #000000;
  --text: #000000; --text-muted: #1F1F1F; --heading: #000000;
  --primary: #0029B8; --primary-hover: #001A7A; --on-primary: #FFFFFF; --primary-soft: #E3E8FF; --on-primary-soft: #001A7A;
  --accent: #8A2500; --accent-strong: #C23500; --link: #0029B8; --focus: #C23500;
  --success: #005C26; --success-soft: #E0F5E8; --warning: #5C3A00; --warning-soft: #FFF0CC; --danger: #9E0000; --danger-soft: #FFE5E5;
  --hero: #FFFFFF; --band: #000000; --on-band: #FFFFFF; --on-band-muted: #FFFFFF;
  --logo-ink: #000000; --logo-primary: #0029B8; --logo-accent: #C23500;
  --shadow: none; --shadow-lg: 0 0 0 2px #000000;
}
[data-theme="contrast"] a { text-decoration: underline; }
[data-theme="contrast"] .card, [data-theme="contrast"] .input, [data-theme="contrast"] .btn { border-width: 2px; }