/*
 * YaToca Admin design tokens
 * Brand: app_yatoca_front/src/constants/MyStyles.js
 *
 * Themes:
 *   light  — admin light theme (full contrast, YaToca orange)
 *   dark   — mobile app parity
 *   auto   — follows prefers-color-scheme
 */

:root {
  /* Brand primitives */
  --yt-black: #010101;
  --yt-dark: #141414;
  --yt-screen: #1f2225;
  --yt-orange: #fe6819;
  --yt-orange-hover: #e55a12;
  --yt-orange-soft: rgba(254, 104, 25, 0.14);
  --yt-medium-grey: #404348;
  --yt-dark-grey: #29292e;
  --yt-light-grey: #7a7a7d;
  --yt-white: #fefefe;
  --yt-success: #27ae60;
  --yt-danger: #ea535b;
  --yt-warning: #f0a202;
  --yt-info: #2f80ed;
  --yt-border-raw: #333333;
  --yt-subtle: #666666;
  --yt-disabled: #8f9092;

  --yt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Arial, sans-serif;

  --yt-radius-sm: 10px;
  --yt-radius-md: 12px;
  --yt-radius-lg: 16px;
  --yt-radius-pill: 15px;

  --yt-sidebar-width: 280px;
  --yt-sidebar-collapsed: 76px;
  --yt-navbar-height: 64px;

  --yt-space-1: 4px;
  --yt-space-2: 8px;
  --yt-space-3: 12px;
  --yt-space-4: 16px;
  --yt-space-5: 20px;
  --yt-space-6: 32px;

  --yt-series-1: var(--yt-orange);
  --yt-series-2: #2f80ed;
  --yt-series-3: var(--yt-success);
  --yt-series-4: #9b51e0;
  --yt-series-5: var(--yt-warning);
  --yt-series-6: var(--yt-danger);

  /* Sidebar always dark (brand chrome) */
  --yt-bg-sidebar: var(--yt-black);
  --yt-bg-sidebar-hover: var(--yt-dark-grey);
  --yt-text-on-dark: var(--yt-white);
  --yt-text-on-dark-muted: var(--yt-light-grey);
  --yt-text-on-orange: var(--yt-dark);

  /* ===== LIGHT (default / auto on light OS) ===== */
  --yt-bg: #f4f4f5;
  --yt-bg-elevated: #ffffff;
  --yt-bg-muted: #ececed;
  --yt-bg-input: #ffffff;
  --yt-bg-chip: #ffffff;
  --yt-bg-action: #ffffff;
  --yt-border: rgba(20, 20, 20, 0.1);
  --yt-border-strong: rgba(20, 20, 20, 0.16);
  --yt-text: #141414;
  --yt-text-secondary: #404348;
  --yt-text-muted: #7a7a7d;
  --yt-shadow-sm: 0 1px 2px rgba(1, 1, 1, 0.06);
  --yt-shadow-md: 0 8px 24px rgba(1, 1, 1, 0.1);
  --yt-chip-fg: #141414;
  --yt-chip-active-fg: #141414;

  --primary: var(--yt-orange);
  --secondary: var(--yt-black);
  --accent: var(--yt-orange);
  --primary-fg: var(--yt-text-on-orange);
  --body-fg: var(--yt-text);
  --body-bg: var(--yt-bg);
  --body-quiet-color: var(--yt-text-secondary);
  --body-loud-color: var(--yt-text);
  --header-bg: var(--yt-bg-elevated);
  --header-color: var(--yt-text);
  --header-link-color: var(--yt-text-secondary);
  --breadcrumbs-bg: transparent;
  --breadcrumbs-fg: var(--yt-text-secondary);
  --link-fg: var(--yt-orange);
  --link-hover-color: var(--yt-orange-hover);
  --hairline-color: var(--yt-border);
  --border-color: var(--yt-border-strong);
  --darkened-bg: var(--yt-bg-muted);
  --selected-bg: var(--yt-orange-soft);
  --selected-row: var(--yt-orange-soft);
  --button-bg: var(--yt-orange);
  --button-hover-bg: var(--yt-orange-hover);
  --default-button-bg: var(--yt-orange);
  --default-button-hover-bg: var(--yt-orange-hover);
  --object-tools-bg: var(--yt-bg-muted);
  --object-tools-hover-bg: var(--yt-orange);

  color-scheme: light;
}

/* Explicit light — wins over OS dark preference */
html[data-theme="light"] {
  --yt-bg: #f4f4f5;
  --yt-bg-elevated: #ffffff;
  --yt-bg-muted: #ececed;
  --yt-bg-input: #ffffff;
  --yt-bg-chip: #ffffff;
  --yt-bg-action: #ffffff;
  --yt-border: rgba(20, 20, 20, 0.1);
  --yt-border-strong: rgba(20, 20, 20, 0.16);
  --yt-text: #141414;
  --yt-text-secondary: #404348;
  --yt-text-muted: #7a7a7d;
  --yt-shadow-sm: 0 1px 2px rgba(1, 1, 1, 0.06);
  --yt-shadow-md: 0 8px 24px rgba(1, 1, 1, 0.1);
  --yt-chip-fg: #141414;
  --yt-chip-active-fg: #141414;
  --yt-orange-soft: rgba(254, 104, 25, 0.12);

  --body-fg: #141414;
  --body-bg: #f4f4f5;
  --body-quiet-color: #404348;
  --body-loud-color: #141414;
  --header-bg: #ffffff;
  --header-color: #141414;
  --header-link-color: #404348;
  --breadcrumbs-fg: #404348;
  --link-fg: #fe6819;
  --link-hover-color: #e55a12;
  --hairline-color: rgba(20, 20, 20, 0.1);
  --border-color: rgba(20, 20, 20, 0.16);
  --darkened-bg: #ececed;
  --selected-bg: rgba(254, 104, 25, 0.12);
  --selected-row: rgba(254, 104, 25, 0.12);
  --primary: #fe6819;
  --primary-fg: #141414;
  --object-tools-bg: #ececed;
  --object-tools-hover-bg: #fe6819;

  color-scheme: light;
}

/* Dark — explicit or auto when OS prefers dark */
html[data-theme="dark"] {
  --yt-bg: var(--yt-screen);
  --yt-bg-elevated: var(--yt-dark);
  --yt-bg-muted: var(--yt-dark-grey);
  --yt-bg-input: var(--yt-black);
  --yt-bg-chip: var(--yt-medium-grey);
  --yt-bg-action: var(--yt-dark);
  --yt-border: var(--yt-border-raw);
  --yt-border-strong: #444444;
  --yt-text: var(--yt-white);
  --yt-text-secondary: var(--yt-light-grey);
  --yt-text-muted: var(--yt-subtle);
  --yt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --yt-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);
  --yt-chip-fg: var(--yt-white);
  --yt-chip-active-fg: var(--yt-dark);
  --yt-orange-soft: rgba(254, 104, 25, 0.16);

  --body-fg: var(--yt-white);
  --body-bg: var(--yt-screen);
  --body-quiet-color: var(--yt-light-grey);
  --body-loud-color: var(--yt-white);
  --header-bg: var(--yt-dark);
  --header-color: var(--yt-white);
  --header-link-color: var(--yt-light-grey);
  --breadcrumbs-fg: var(--yt-light-grey);
  --link-fg: var(--yt-orange);
  --link-hover-color: var(--yt-orange-hover);
  --hairline-color: var(--yt-border-raw);
  --border-color: #444444;
  --darkened-bg: var(--yt-dark-grey);
  --selected-bg: rgba(254, 104, 25, 0.16);
  --selected-row: rgba(254, 104, 25, 0.16);
  --primary: var(--yt-orange);
  --primary-fg: var(--yt-dark);
  --object-tools-bg: var(--yt-medium-grey);
  --object-tools-hover-bg: var(--yt-orange);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"],
  html:not([data-theme]),
  :root:not([data-theme="light"]) {
    --yt-bg: var(--yt-screen);
    --yt-bg-elevated: var(--yt-dark);
    --yt-bg-muted: var(--yt-dark-grey);
    --yt-bg-input: var(--yt-black);
    --yt-bg-chip: var(--yt-medium-grey);
    --yt-bg-action: var(--yt-dark);
    --yt-border: var(--yt-border-raw);
    --yt-border-strong: #444444;
    --yt-text: var(--yt-white);
    --yt-text-secondary: var(--yt-light-grey);
    --yt-text-muted: var(--yt-subtle);
    --yt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --yt-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);
    --yt-chip-fg: var(--yt-white);
    --yt-chip-active-fg: var(--yt-dark);
    --yt-orange-soft: rgba(254, 104, 25, 0.16);

    --body-fg: var(--yt-white);
    --body-bg: var(--yt-screen);
    --body-quiet-color: var(--yt-light-grey);
    --body-loud-color: var(--yt-white);
    --header-bg: var(--yt-dark);
    --header-color: var(--yt-white);
    --header-link-color: var(--yt-light-grey);
    --breadcrumbs-fg: var(--yt-light-grey);
    --link-fg: var(--yt-orange);
    --link-hover-color: var(--yt-orange-hover);
    --hairline-color: var(--yt-border-raw);
    --border-color: #444444;
    --darkened-bg: var(--yt-dark-grey);
    --selected-bg: rgba(254, 104, 25, 0.16);
    --selected-row: rgba(254, 104, 25, 0.16);
    --primary: var(--yt-orange);
    --primary-fg: var(--yt-dark);
    --object-tools-bg: var(--yt-medium-grey);
    --object-tools-hover-bg: var(--yt-orange);

    color-scheme: dark;
  }

  /* Force light wins over OS dark */
  html[data-theme="light"] {
    --yt-bg: #f4f4f5;
    --yt-bg-elevated: #ffffff;
    --yt-bg-muted: #ececed;
    --yt-bg-input: #ffffff;
    --yt-bg-chip: #ffffff;
    --yt-bg-action: #ffffff;
    --yt-border: rgba(20, 20, 20, 0.1);
    --yt-border-strong: rgba(20, 20, 20, 0.16);
    --yt-text: #141414;
    --yt-text-secondary: #404348;
    --yt-text-muted: #7a7a7d;
    --yt-shadow-sm: 0 1px 2px rgba(1, 1, 1, 0.06);
    --yt-shadow-md: 0 8px 24px rgba(1, 1, 1, 0.1);
    --yt-chip-fg: #141414;
    --yt-chip-active-fg: #141414;

    --body-fg: #141414;
    --body-bg: #f4f4f5;
    --body-quiet-color: #404348;
    --body-loud-color: #141414;
    --header-bg: #ffffff;
    --header-color: #141414;
    --header-link-color: #404348;
    --breadcrumbs-fg: #404348;
    --link-fg: #fe6819;
    --hairline-color: rgba(20, 20, 20, 0.1);
    --border-color: rgba(20, 20, 20, 0.16);
    --darkened-bg: #ececed;
    --primary: #fe6819;
    --primary-fg: #141414;
    --object-tools-bg: #ececed;

    color-scheme: light;
  }
}