/* Dragon Remote Desktop — Design System Tokens
 * Mirror of app/frontend/src/styles/tokens.css, adapted for plain CSS.
 * Dark is the default; [data-theme="light"] overrides.
 */

:root {
  /* Brand */
  --gold-primary: #c9a35c;
  --gold-bright:  #e8c971;
  --gold-dark:    #8a6620;
  --gold-warm:    #a08540;
  --gold-tint-08: rgba(201,163,92,.08);
  --gold-tint-12: rgba(201,163,92,.12);
  --gold-tint-25: rgba(201,163,92,.25);

  /* Dark (default) */
  --bg-app:       #0a0a0a;
  --bg-section:   #0f0f0f;
  --bg-surface:   #141414;
  --bg-elevated:  #1a1a1a;
  --bg-header:    #0c0c0ccc;
  --bg-footer:    #080808;
  --border-subtle:  #1c1c1c;
  --border-default: #252525;
  --border-strong:  #2a2a2a;
  --text-primary:   #eeeeee;
  --text-secondary: #aaaaaa;
  --text-muted:     #888888;
  --text-faint:     #666666;

  /* Semantic */
  --success:       #3faa71;
  --danger:        #e5484d;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --max-w: 1180px;
  --header-h: 64px;
}

[data-theme="light"] {
  --bg-app:       #ffffff;
  --bg-section:   #fafafa;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f8f0db;
  --bg-header:    rgba(255,255,255,.9);
  --bg-footer:    #f5f5f5;
  --border-subtle:  #e8e8e8;
  --border-default: #e0e0e0;
  --border-strong:  #d0d0d0;
  --text-primary:   #1a1a1a;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-faint:     #999999;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-app:       #ffffff;
    --bg-section:   #fafafa;
    --bg-surface:   #ffffff;
    --bg-elevated:  #f8f0db;
    --bg-header:    rgba(255,255,255,.9);
    --bg-footer:    #f5f5f5;
    --border-subtle:  #e8e8e8;
    --border-default: #e0e0e0;
    --border-strong:  #d0d0d0;
    --text-primary:   #1a1a1a;
    --text-secondary: #555555;
    --text-muted:     #888888;
    --text-faint:     #999999;
  }
}