/* Learn-French target skin — colors only (not UI locale) */

:root {
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: var(--color-green);
  --color-accent: #B28F2E;
  --color-accent-wash: color-mix(in oklch, var(--color-accent) 12%, var(--color-surface));
  --color-cta: var(--color-terracotta);
  --color-cta-wash: color-mix(in oklch, var(--color-cta) 28%, var(--color-surface));
  --color-link: var(--color-green);
  --color-line: #00000014;
  --color-line-strong: #00000047;
  --color-highlight: #F6F1E4;
  --color-highlight-hover: #EFE8D4;
  --color-table-wash: color-mix(in oklch, var(--color-blue) 5%, var(--color-surface));
  --color-nav-wash: color-mix(in oklch, var(--color-blue) 5%, var(--color-surface));
  --color-nav-line: var(--color-blue-line);
  --color-green: #40714B;
  --color-green-wash: color-mix(in oklch, var(--color-green) 12%, var(--color-surface));
  --color-green-line: color-mix(in oklch, var(--color-green) 28%, var(--color-surface));
  --color-green-hover: color-mix(in oklch, var(--color-green) 18%, var(--color-surface));
  --color-blue: #3D6A93;
  --color-blue-wash: color-mix(in oklch, var(--color-blue) 12%, var(--color-surface));
  --color-blue-line: color-mix(in oklch, var(--color-blue) 28%, var(--color-surface));
  --color-blue-hover: color-mix(in oklch, var(--color-blue) 18%, var(--color-surface));
  --color-purple: #705D94;
  --color-purple-wash: color-mix(in oklch, var(--color-purple) 12%, var(--color-surface));
  --color-purple-line: color-mix(in oklch, var(--color-purple) 28%, var(--color-surface));
  --color-purple-hover: color-mix(in oklch, var(--color-purple) 18%, var(--color-surface));
  --color-terracotta: #AB4735;
  --color-terracotta-wash: color-mix(in oklch, var(--color-terracotta) 12%, var(--color-surface));
  --color-terracotta-line: color-mix(in oklch, var(--color-terracotta) 28%, var(--color-surface));
  --color-terracotta-hover: color-mix(in oklch, var(--color-terracotta) 18%, var(--color-surface));
  --color-shadow: #00000014;
  --color-shadow-strong: #0000001F;

  --color-goals-background: var(--color-green-wash);
  --color-goals-line: var(--color-line);
  --color-goals-check: var(--color-green);
  --color-hub-card-wash: var(--color-surface);
  --color-hub-card-line: var(--color-blue-line);
  --color-hub-card-hover: var(--color-blue-hover);
  --color-related-card-wash: var(--color-green-wash);
  --color-related-card-line: var(--color-green-line);
  --color-related-card-hover: var(--color-green-hover);
  --color-cefr-wash: var(--color-green-wash);
  --color-cefr-line: var(--color-green-line);
  --color-cefr-hover: var(--color-green-hover);
  --color-catalog-filter-wash: var(--color-blue-wash);
  --color-catalog-filter-line: var(--color-blue-line);
  --color-callout-wash: var(--color-green-wash);
  --color-callout-line: var(--color-green-line);
  --color-listen-reveal-wash: color-mix(in oklch, var(--color-text) 6%, var(--color-surface));
  --image-goals-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4.1 8.2l2.5 2.5 5.3-5.5'/%3E%3C/svg%3E");
  --image-listen-headphones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2340714B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 13v3.2A2.8 2.8 0 0 0 6.8 19H8v-6H4.8A.8.8 0 0 0 4 13.8V13zm16 0v3.2A2.8 2.8 0 0 1 17.2 19H16v-6h3.2a.8.8 0 0 1 .8.8V13zM4 13a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --image-listen-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}