dyolink/frontend/src/styles/globals.css

@import "tailwindcss";

/* Light theme tokens (future-ready) */
:root[data-theme="light"] {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --color-background-primary: #f6f9fc;
  --color-background-secondary: #ffffff;
  --color-background-card: #ffffff;
  --color-surface-elevated: #f8fbff;

  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;

  --color-border: #d2dcec;
  --color-border-strong: #aec0de;

  --color-primary: #009cae;
  --color-primary-contrast: #031014;
  --color-primary-soft: rgba(0, 156, 174, 0.16);
  --color-icon: #e1bc72;

  --web-opacity: 0.12;
  --web-line: rgba(0, 188, 255, 0.32);
  --web-glow: rgba(0, 188, 255, 0.42);
}

/* Dark theme tokens */
:root[data-theme="dark"] {
  --color-background-primary: #000c1c;
  --color-background-secondary: #0b1a2b;
  --color-background-card: #14253d;
  --color-surface-elevated: #1b2f4e;

  --color-text-primary: #f5f9ff;
  --color-text-secondary: #b6c6dd;
  --color-text-muted: #8ea3bf;

  --color-border: #29456a;
  --color-border-strong: #3b5f8f;

  --color-primary: #09a9bc;
  --color-primary-contrast: #001117;
  --color-primary-soft: rgba(9, 169, 188, 0.2);
  --color-icon: #e1bc72;
}

/* Default theme = dark */
:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --color-background-primary: #000c1c;
  --color-background-secondary: #0a1520;
  --color-background-card: #14253d;
  --color-surface-elevated: #1b2f4e;

  --color-text-primary: #f5f9ff;
  --color-text-secondary: #b6c6dd;
  --color-text-muted: #8ea3bf;

  --color-border: #29456a;
  --color-border-strong: #3b5f8f;

  --color-primary: #09a9bc;
  --color-primary-contrast: #001117;
  --color-primary-soft: rgba(9, 169, 188, 0.2);
  --color-icon: #f3bb4b;

  --web-opacity: 0.14;
  --web-line: rgba(59, 153, 220, 0.34);
  --web-line-strong: rgba(73, 214, 255, 0.78);
  --web-glow: rgba(48, 204, 255, 0.55);
}

@theme inline {
  --color-background-primary: var(--color-background-primary);
  --color-background-secondary: var(--color-background-secondary);
  --color-background-card: var(--color-background-card);
  --color-surface-elevated: var(--color-surface-elevated);

  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-muted: var(--color-text-muted);

  --color-border: var(--color-border);
  --color-border-strong: var(--color-border-strong);
  --color-primary: var(--color-primary);
  --color-primary-contrast: var(--color-primary-contrast);
  --color-primary-soft: var(--color-primary-soft);
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  color-scheme: dark;
}

html[data-theme='light'] {
  color-scheme: light;
}

body {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.surface-card {
  background: color-mix(in srgb, var(--color-background-card) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.surface-panel {
  background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.icon-flat {
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Global icon color override (easy to revert) */
.lucide {
  color: var(--color-icon);
  stroke: currentColor;
}