/* Palette et tokens fournis pour Atelier.
   Adaptation CSS autonome : le bouton de thème ajoute/enlève body.dark. */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.9916 0.005 228.8162);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.7622 0.1431 234.9356);
  --primary-foreground: oklch(0.9851 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.7622 0.1431 234.9356);
  --muted-ui: oklch(0.9421 0.035 229.2919);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.8786 0.0744 229.8742);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.7622 0.1431 234.9356);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.81 0.1 252);
  --chart-2: oklch(0.62 0.19 260);
  --chart-3: oklch(0.55 0.22 263);
  --chart-4: oklch(0.49 0.22 264);
  --chart-5: oklch(0.42 0.18 266);
  --sidebar-ui: oklch(1 0 0);
  --sidebar-foreground-ui: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.7622 0.1431 234.9356);
  --sidebar-primary-foreground: oklch(0.9851 0 0);
  --sidebar-accent: oklch(0.8786 0.0744 229.8742);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.709 0 0);
  --radius: .625rem;
  --shadow-sm-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 1px 2px -1px hsl(0 0% 0% / .10);
  --shadow-md-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 2px 4px -1px hsl(0 0% 0% / .10);

  /* Pont vers les composants existants du MVP. */
  --paper: var(--background);
  --ink: var(--foreground);
  --line: var(--border);
  --sidebar: var(--sidebar-ui);
  --lilac: var(--primary);
  --lilac-dark: var(--foreground);
  --lavender: var(--secondary);
  --peach: var(--destructive);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

body.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.7322 0.1422 252.6973);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.7622 0.1431 234.9356);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.7622 0.1431 234.9356);
  --muted-ui: oklch(0.269 0 0);
  --muted-foreground: oklch(0.8699 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.824 0.1077 231.5742);
  --destructive: oklch(0.7022 0.1892 22.2279);
  --border: oklch(0.2768 0 0);
  --input: oklch(0.325 0 0);
  --ring: oklch(0.556 0 0);
  --sidebar-ui: oklch(0.205 0 0);
  --sidebar-foreground-ui: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.275 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  --shadow-sm-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 1px 2px -1px hsl(0 0% 0% / .10);
  --shadow-md-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 2px 4px -1px hsl(0 0% 0% / .10);
  --paper: var(--background);
  --ink: var(--foreground);
  --line: var(--border);
  --sidebar: var(--sidebar-ui);
  --lilac: var(--primary);
  --lilac-dark: var(--foreground);
  --lavender: var(--secondary);
  --peach: var(--destructive);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

html, body, main { background: var(--background); }
body { color: var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font-family: inherit; }
h1, h2, h3, .brand, .post-caption strong, .order-info h2, .collection h2, .artist-profile-head h1, .match-card h2, .creator-dash h2, .modal h2, .result-info h3 { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; letter-spacing: -.045em; }
.eyebrow, .visual-stamp, .scroll-cue { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.sidebar { background: var(--sidebar-ui); border-color: var(--border); }.brand { color: var(--sidebar-foreground-ui); }.brand-mark { color: var(--primary-foreground); background: var(--primary); }.nav-link { color: var(--muted-foreground); }.nav-link > span { color: currentColor; }.nav-link:hover { color: var(--secondary-foreground); background: var(--secondary); }.nav-link.active { color: var(--primary-foreground); background: var(--primary); }.nav-link.active > span { color: inherit; }.nav-link b { color: var(--primary-foreground); background: var(--destructive); }.create-button { color: var(--primary-foreground); background: var(--primary); box-shadow: var(--shadow-sm-ui); }.create-button:hover { background: var(--foreground); }.profile-pill { color: var(--sidebar-foreground-ui); background: var(--secondary); }.profile-pill small, .profile-pill i { color: var(--muted-foreground); }

.eyebrow { color: var(--muted-foreground); }.round-button { border-color: var(--border); color: var(--foreground); background: var(--card); box-shadow: none; }.round-button:hover { border-color: var(--ring); color: var(--primary-foreground); background: var(--primary); }.feed-switch, .page-header, .profile-tabs { border-color: var(--border); }.feed-tab { color: var(--muted-foreground); }.feed-tab.active { color: var(--foreground); border-color: var(--primary); }.feed-status { color: var(--muted-foreground); }.feed-status i { background: var(--primary); }

.feed-scroller { border-color: var(--border); background: var(--card); box-shadow: var(--shadow-md-ui); }.feature-post, .feed-post { background: var(--card); }.content-label { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }.ghost-icon { color: var(--foreground); background: color-mix(in oklch, var(--background) 70%, transparent); border-color: var(--border); }.post-caption { text-shadow: 0 1px 8px color-mix(in srgb, #000 28%, transparent); }.post-actions .post-action { border-color: color-mix(in oklch, var(--border) 70%, transparent); background: color-mix(in oklch, var(--background) 75%, transparent); }.post-action:hover, .post-action.liked, .post-action.saved { color: var(--primary-foreground); background: var(--primary); }.next-art { border-color: var(--border); color: var(--foreground); background: color-mix(in oklch, var(--background) 75%, transparent); }.next-art:hover { color: var(--primary-foreground); background: var(--primary); }

/* Les cinq bleus de ta palette servent aux aperçus neutres de portfolio. */
.art-aurora { background: var(--chart-3) !important; }.art-aurora:before { background: var(--chart-1); }.art-aurora:after { background: var(--chart-5); }.art-poppy { background: var(--chart-2) !important; }.art-poppy:before { background: var(--chart-5); }.art-poppy:after { background: var(--chart-1); }.art-bluebell { background: var(--chart-4) !important; }.art-bluebell:before { background: var(--chart-1); }.art-bluebell:after { background: var(--chart-5); }.art-garden { background: var(--chart-1) !important; }.art-garden:before { background: var(--chart-4); }.art-garden:after { background: var(--chart-2); }.art-sunset { background: var(--chart-5) !important; }.art-sunset:before { background: var(--chart-2); }.art-sunset:after { background: var(--chart-1); }.art-lilac { background: var(--chart-2) !important; }.art-lilac:before { background: var(--chart-4); }.art-lilac:after { background: var(--chart-1); }

.mini-card, .artist-result, .order-card, .creator-dash > section { border-color: var(--border); background: var(--card); box-shadow: var(--shadow-sm-ui); }.match-card { background: var(--secondary); }.mini-card-title, .daily-artist b { color: var(--card-foreground); }.mini-icon { color: var(--primary-foreground); background: var(--primary); }.match-card p, .daily-artist small { color: var(--muted-foreground); }.tag-row button, .profile-tags span { color: var(--secondary-foreground); background: var(--secondary); }.text-button, .back-link { color: var(--primary); }.safety-card { border-color: var(--border); background: var(--secondary); }.shield { color: var(--primary-foreground); background: var(--primary); }.safety-card b { color: var(--foreground); }.safety-card p { color: var(--muted-foreground); }

.big-search { border-color: var(--input); background: var(--card); box-shadow: var(--shadow-sm-ui); }.big-search input { color: var(--foreground); }.big-search button, .primary-button { color: var(--primary-foreground); background: var(--primary); }.big-search button:hover, .primary-button:hover { background: var(--foreground); }.popular-searches { color: var(--muted-foreground); }.popular-searches button { color: var(--primary); }.filters { border-color: var(--border); }.filter-heading h2, summary { color: var(--foreground); }.range-values, .check, .radio { color: var(--muted-foreground); }.check > span, .radio > span { border-color: var(--input); background: var(--card); }.check input:checked + span { border-color: var(--primary); background: var(--primary); }.filter-chips button, .content-settings button { border-color: var(--input); color: var(--muted-foreground); background: var(--card); }.filter-chips button.selected { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }.results-top { border-color: var(--border); }.results-top p { color: var(--muted-foreground); }.results-top strong, .results-top b, .sort-select select { color: var(--foreground); }.artist-result { background: var(--card); }.result-art { border-color: var(--border); }.result-info { background: var(--card); }.result-artist { border: 0; background: transparent; }.result-artist b, .result-info h3, .result-price { color: var(--card-foreground); }.result-artist small, .result-meta { color: var(--muted-foreground); }.availability { color: var(--primary); }.result-tags span { color: var(--secondary-foreground); background: var(--secondary); }

.artist-cover { border-color: var(--border); background: var(--chart-4); }.artist-cover:before { background: color-mix(in oklch, var(--chart-1) 32%, transparent); }.artist-cover:after { border-color: color-mix(in oklch, var(--chart-2) 45%, transparent); }.artist-cover span { background: var(--chart-1); }.handle, .artist-info, .order-info p, .page-header p:last-child { color: var(--muted-foreground); }.info-line { color: var(--card-foreground); }.verified { color: var(--primary-foreground); background: var(--primary); }.secondary-button { border-color: var(--input); color: var(--foreground); background: var(--card); }.secondary-button:hover { color: var(--primary-foreground); background: var(--primary); }.profile-tabs button, .order-tabs button { color: var(--muted-foreground); }.profile-tabs button.active, .order-tabs button.active { color: var(--foreground); border-color: var(--primary); }.portfolio-card { border-color: var(--border); }.status.progress { color: var(--primary-foreground); background: var(--primary); }.status.pending { color: var(--primary-foreground); background: var(--destructive); }.progress-track { background: var(--secondary); }.progress-track span { background: var(--primary); }

.messages-layout { border-color: var(--border); background: var(--card); }.conversation-list, .chat-head, .chat-compose { border-color: var(--border); }.message-search { background: var(--secondary); }.message-search input { color: var(--foreground); }.conversation { color: var(--foreground); }.conversation:hover { background: var(--secondary); }.conversation.active { color: var(--primary-foreground); background: var(--primary); }.conversation.active small, .conversation.active time { color: color-mix(in oklch, var(--primary-foreground) 72%, transparent); }.chat-panel { background: var(--card); }.chat-head small { color: var(--muted-foreground); }.order-context { background: var(--secondary); }.order-context b { color: var(--foreground); }.bubble { color: var(--card-foreground); background: var(--secondary); }.bubble.mine { color: var(--primary-foreground); background: var(--primary); }.chat-compose input { color: var(--foreground); background: var(--card); }.chat-compose button { color: var(--primary-foreground); background: var(--primary); }

.modal { color: var(--card-foreground); background: var(--popover); box-shadow: 0 22px 80px hsl(0 0% 0% / .25); }.modal .eyebrow { color: var(--muted-foreground); }.modal-close { color: var(--primary-foreground); background: var(--primary); }.commission-option { border-color: var(--border); background: var(--card); }.commission-option.selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }.upload-drop { border-color: var(--input); background: var(--secondary); }

/* Mode clair : même système, sans simple inversion du noir. */
body:not(.dark) .sidebar { background: var(--sidebar-ui); }.sidebar .profile-pill { border: 1px solid var(--border); }.sidebar .profile-pill .avatar { border-color: var(--border); }body:not(.dark) .feed-scroller { background: #f8f9ff; }.feature-post, .feed-post { border-color: var(--border); }body:not(.dark) .ghost-icon { color: var(--foreground); background: rgba(255,255,255,.78); }body:not(.dark) .post-actions .post-action, body:not(.dark) .next-art { color: var(--foreground); background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.85); }body:not(.dark) .post-action:hover, body:not(.dark) .post-action.liked, body:not(.dark) .post-action.saved, body:not(.dark) .next-art:hover { color: var(--primary-foreground); background: var(--primary); }body:not(.dark) .feed-status { color: var(--muted-foreground); }body:not(.dark) .feed-status i { background: var(--primary); }body:not(.dark) .mini-card, body:not(.dark) .artist-result, body:not(.dark) .order-card, body:not(.dark) .creator-dash > section { background: var(--card); }body:not(.dark) .match-card, body:not(.dark) .safety-card, body:not(.dark) .message-search, body:not(.dark) .order-context { background: var(--secondary); }body:not(.dark) .messages-layout, body:not(.dark) .chat-panel, body:not(.dark) .chat-compose { background: var(--card); }body:not(.dark) .conversation:hover { background: var(--secondary); }body:not(.dark) .bubble { background: var(--secondary); }body:not(.dark) .chat-compose input { background: var(--card); }body:not(.dark) .result-info { background: var(--card); }

@media (max-width: 780px) { .dark .sidebar { background: rgba(37,37,37,.96); }.dark .nav-link { color: var(--muted-foreground); }.dark .nav-link.active { color: var(--primary-foreground); background: var(--primary); } }