/**
 * สุดยอดวัวชน — Brand theme tokens & utility classes
 * Copy this file to any site, then:
 *   <link rel="stylesheet" href="/sudyod-theme.css" />
 *   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet" />
 */

/* ═══════════════════════════════════════════════════
   1) Design tokens — dark (default) + light
   Toggle via html.dark / html.light (next-themes)
   ═══════════════════════════════════════════════════ */

  /* Shared (non-color) */
  :root {
    --sd-radius: 2px;
    --sd-radius-sheet: 12px;
    --sd-font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --sd-font-body: "Figtree", system-ui, sans-serif;
  }

  /* Dark — forest (default when no class / html.dark) */
  :root,
  html.dark {
    --sd-bg: #0c1412;
    --sd-bg-deep: #08100e;
    --sd-bg-elevated: #15201c;
    --sd-bg-panel: #1a2622;
    --sd-surface: #243330;
    --sd-surface-hover: #2d3f3a;

    --sd-border: rgba(180, 210, 195, 0.12);
    --sd-border-strong: rgba(180, 210, 195, 0.22);

    --sd-text: #e8f0eb;
    --sd-text-muted: rgba(232, 240, 235, 0.55);
    --sd-text-faint: rgba(232, 240, 235, 0.35);

    --sd-accent: #f5a623;
    --sd-accent-hot: #ffc14d;
    --sd-accent-dim: rgba(245, 166, 35, 0.16);
    --sd-on-accent: #08100e;

    --sd-signal: #3dffa8;
    --sd-signal-dim: rgba(61, 255, 168, 0.14);

    --sd-danger: #ff6b4a;
    --sd-danger-dim: rgba(255, 107, 74, 0.14);

    color-scheme: dark;
  }

  /*
   * Light — white + red (separate look from dark forest/amber)
   */
  html.light {
    --sd-bg: #f5f5f5;
    --sd-bg-deep: #111111;
    --sd-bg-elevated: #ffffff;
    --sd-bg-panel: #ffffff;
    --sd-surface: #eeeeee;
    --sd-surface-hover: #e2e2e2;

    --sd-border: rgba(17, 17, 17, 0.12);
    --sd-border-strong: rgba(17, 17, 17, 0.24);

    --sd-text: #111111;
    --sd-text-muted: #444444;
    --sd-text-faint: #666666;

    --sd-accent: #dc2626;
    --sd-accent-hot: #ef4444;
    --sd-accent-dim: rgba(220, 38, 38, 0.1);
    --sd-on-accent: #ffffff;

    --sd-signal: #16a34a;
    --sd-signal-dim: rgba(22, 163, 74, 0.12);

    --sd-danger: #b91c1c;
    --sd-danger-dim: rgba(185, 28, 28, 0.12);

    color-scheme: light;
  }
  
  /* ═══════════════════════════════════════════════════
     2) Base (optional — apply on body)
     ═══════════════════════════════════════════════════ */
  .sd-theme {
    background: var(--sd-bg);
    color: var(--sd-text);
    font-family: var(--sd-font-body);
    -webkit-font-smoothing: antialiased;
  }

  /* Light: avoid greying text via subpixel antialias */
  html.light .sd-theme {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  
  .sd-theme ::selection {
    background: rgba(245, 166, 35, 0.35);
    color: #fff;
  }

  html.light .sd-theme ::selection {
    background: rgba(220, 38, 38, 0.25);
    color: #111111;
  }

  html.light .sd-label {
    color: #666666;
  }

  /* Force ink on light — full opacity, no washed text */
  html.light,
  html.light body,
  html.light .sd-theme {
    color: #111111;
    opacity: 1;
  }

  html.light .sd-card,
  html.light .sd-label,
  html.light .sd-display,
  html.light .sd-text,
  html.light .sd-text-muted,
  html.light .sd-text-faint,
  html.light .sd-text-accent {
    opacity: 1;
  }
  
  .sd-theme :focus-visible {
    outline: 2px solid rgba(245, 166, 35, 0.7);
    outline-offset: 2px;
  }
  
  /* ═══════════════════════════════════════════════════
     3) Backgrounds
     ═══════════════════════════════════════════════════ */
  .sd-bg          { background: var(--sd-bg); }
  .sd-bg-deep     { background: var(--sd-bg-deep); }
  .sd-bg-elevated { background: var(--sd-bg-elevated); }
  .sd-bg-panel    { background: var(--sd-bg-panel); }
  .sd-surface     { background: var(--sd-surface); }
  .sd-surface-hover:hover { background: var(--sd-surface-hover); }
  
  .sd-bg-accent     { background: var(--sd-accent); color: var(--sd-on-accent); }
  .sd-bg-accent-dim { background: var(--sd-accent-dim); }
  .sd-bg-signal-dim { background: var(--sd-signal-dim); }
  .sd-bg-danger-dim { background: var(--sd-danger-dim); }
  
  /* Brand mark tile (clipped corner like logo badge) */
  .sd-mark {
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  }
  
  /* ═══════════════════════════════════════════════════
     4) Text & accents
     ═══════════════════════════════════════════════════ */
  .sd-text        { color: var(--sd-text); }
  .sd-text-muted  { color: var(--sd-text-muted); }
  .sd-text-faint  { color: var(--sd-text-faint); }
  .sd-text-accent { color: var(--sd-accent); }
  .sd-text-signal { color: var(--sd-signal); }
  .sd-text-danger { color: var(--sd-danger); }
  .sd-text-on-accent { color: var(--sd-on-accent); }
  
  .sd-display {
    font-family: var(--sd-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  
  .sd-label {
    font-family: var(--sd-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-text-muted);
  }
  
  /* ═══════════════════════════════════════════════════
     5) Borders & radius (มุมเหลี่ยม)
     ═══════════════════════════════════════════════════ */
  .sd-radius        { border-radius: var(--sd-radius); }
  .sd-radius-sheet  { border-radius: var(--sd-radius-sheet); }
  .sd-radius-none   { border-radius: 0; }
  
  .sd-border        { border: 1px solid var(--sd-border); }
  .sd-border-strong { border: 1px solid var(--sd-border-strong); }
  .sd-border-accent { border: 1px solid var(--sd-accent); }
  .sd-border-top-accent { border-top: 2px solid var(--sd-accent); }
  
  /* ═══════════════════════════════════════════════════
     6) Components
     ═══════════════════════════════════════════════════ */
  
  /* Card / panel */
  .sd-card {
    background: var(--sd-bg-panel);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    color: var(--sd-text);
  }
  
  .sd-card-active {
    background: var(--sd-accent-dim);
    border: 1px solid var(--sd-accent);
    border-radius: var(--sd-radius);
  }
  
  /* Primary button (amber CTA) */
  .sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: var(--sd-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    border: none;
    border-radius: var(--sd-radius);
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.1s ease;
  }
  .sd-btn:hover { filter: brightness(1.08); }
  .sd-btn:active { transform: scale(0.98); }
  .sd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  
  /* Ghost / secondary */
  .sd-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: var(--sd-font-display);
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    color: var(--sd-text);
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius);
    cursor: pointer;
    text-decoration: none;
  }
  .sd-btn-ghost:hover { background: var(--sd-surface); }
  
  /* Input */
  .sd-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--sd-font-body);
    font-size: 0.875rem;
    color: var(--sd-text);
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    outline: none;
  }
  .sd-input::placeholder { color: var(--sd-text-faint); }
  .sd-input:focus { border-color: var(--sd-accent); }
  
  /* Live pill */
  .sd-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-signal);
    background: var(--sd-signal-dim);
    border-radius: var(--sd-radius);
  }
  .sd-live::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    background: var(--sd-signal);
    border-radius: 1px;
    animation: sd-signal-pulse 1.6s ease-in-out infinite;
  }
  
  @keyframes sd-signal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
  }
  
  /* Segmented tabs */
  .sd-tabs {
    display: inline-flex;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    overflow: hidden;
  }
  .sd-tab {
    padding: 0.4rem 0.75rem;
    font-family: var(--sd-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sd-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .sd-tab[aria-selected="true"],
  .sd-tab.is-active {
    background: var(--sd-accent);
    color: var(--sd-on-accent);
  }
  
  /* Divider */
  .sd-divider {
    height: 1px;
    background: var(--sd-border);
    border: none;
  }