/*
 * Theme Studio — design tokens (loaded FIRST, before the skins).
 *
 * Everything is scoped under html.ts-skin so nothing applies unless our runtime
 * guard added the class. --ts-accent / --ts-on-accent are injected inline (from
 * validated options); every other accent shade is derived here with color-mix()
 * so a single color drives the whole palette. Light is the default; the dark
 * block re-defines the same tokens under [data-theme="dark"].
 *
 * Look: refined "Clean SaaS" (Linear/Stripe grade) — cool neutrals, hairline
 * borders, layered soft shadows, calm accent. Roboto is kept (Perfex-native).
 */

html.ts-skin {
  /* Accent ramp (base + on-accent come from the injected inline <style>). */
  --ts-accent:        #03A9F4;
  --ts-on-accent:     #FFFFFF;
  --ts-accent-hover:  color-mix(in srgb, var(--ts-accent) 90%, #000);
  --ts-accent-active: color-mix(in srgb, var(--ts-accent) 82%, #000);
  --ts-accent-soft:   color-mix(in srgb, var(--ts-accent) 11%, #fff);
  --ts-accent-softer: color-mix(in srgb, var(--ts-accent) 6%,  #fff);
  --ts-accent-line:   color-mix(in srgb, var(--ts-accent) 32%, #fff);
  --ts-accent-ring:   color-mix(in srgb, var(--ts-accent) 34%, transparent);
  --ts-accent-text:   color-mix(in srgb, var(--ts-accent) 88%, #000);

  /* Surfaces & neutrals (light). */
  --ts-bg:            #F6F8FB;
  --ts-bg-tint:       #EEF1F6;
  --ts-surface:       #FFFFFF;
  --ts-surface-alt:   #F5F7FA;
  --ts-surface-sunken:#F1F4F8;
  --ts-elevated:      #FFFFFF;
  --ts-overlay:       rgba(16, 24, 40, .44);

  /* Text. */
  --ts-ink:           #1A2233;
  --ts-text:          #38414F;
  --ts-text-2:        #5A6474;
  --ts-muted:         #8A93A2;
  --ts-faint:         #AEB5C0;

  /* Borders. */
  --ts-border:        #E6EAF1;
  --ts-border-strong: #D7DCE6;
  --ts-hairline:      rgba(16, 24, 40, .07);

  /* Semantic. */
  --ts-success:       #16A34A;
  --ts-success-soft:  #E7F6ED;
  --ts-warning:       #D97706;
  --ts-warning-soft:  #FBF0DD;
  --ts-danger:        #DC2626;
  --ts-danger-soft:   #FBE9E9;
  --ts-info:          #0284C7;
  --ts-info-soft:     #E2F1FB;

  /* Chrome surfaces. */
  --ts-sidebar-bg:      #FFFFFF;
  --ts-sidebar-border:  #ECEFF4;
  --ts-sidebar-text:    #4A5464;
  --ts-sidebar-muted:   #8A93A2;
  --ts-sidebar-active:  var(--ts-accent);
  --ts-sidebar-active-bg: var(--ts-accent-soft);
  --ts-sidebar-hover-bg:  #F2F5F9;
  --ts-navbar-bg:       rgba(255, 255, 255, .82);
  --ts-navbar-border:   #ECEFF4;

  /* Radii. */
  --ts-r-xs:  6px;
  --ts-r-sm:  8px;
  --ts-r-md:  10px;
  --ts-r-lg:  14px;
  --ts-r-xl:  18px;
  --ts-r-pill: 999px;

  /* Layered shadows. */
  --ts-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --ts-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --ts-shadow-md: 0 2px 4px -1px rgba(16, 24, 40, .07), 0 6px 16px -4px rgba(16, 24, 40, .08);
  --ts-shadow-lg: 0 10px 28px -6px rgba(16, 24, 40, .14), 0 4px 10px -4px rgba(16, 24, 40, .07);
  --ts-shadow-pop: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 4px 12px -6px rgba(16, 24, 40, .10);
  --ts-ring-focus: 0 0 0 3px var(--ts-accent-ring);

  /* Motion. */
  --ts-ease: cubic-bezier(.4, 0, .2, 1);
  --ts-dur:  .16s;

  /* Typography. */
  --ts-font: Roboto, -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------- */
/*  DARK — same tokens, re-defined.                                           */
/* -------------------------------------------------------------------------- */
html.ts-skin[data-theme="dark"] {
  --ts-accent-hover:  color-mix(in srgb, var(--ts-accent) 88%, #fff);
  --ts-accent-active: color-mix(in srgb, var(--ts-accent) 74%, #fff);
  --ts-accent-soft:   color-mix(in srgb, var(--ts-accent) 22%, #12151C);
  --ts-accent-softer: color-mix(in srgb, var(--ts-accent) 13%, #12151C);
  --ts-accent-line:   color-mix(in srgb, var(--ts-accent) 42%, #12151C);
  --ts-accent-ring:   color-mix(in srgb, var(--ts-accent) 40%, transparent);
  --ts-accent-text:   color-mix(in srgb, var(--ts-accent) 82%, #fff);

  --ts-bg:            #0D0F14;
  --ts-bg-tint:       #101319;
  --ts-surface:       #15181F;
  --ts-surface-alt:   #191D25;
  --ts-surface-sunken:#101319;
  --ts-elevated:      #1B202A;
  --ts-overlay:       rgba(0, 0, 0, .60);

  --ts-ink:           #EDEFF3;
  --ts-text:          #D3D8E0;
  --ts-text-2:        #AEB6C2;
  --ts-muted:         #7E8797;
  --ts-faint:         #616B7B;

  --ts-border:        rgba(255, 255, 255, .09);
  --ts-border-strong: rgba(255, 255, 255, .16);
  --ts-hairline:      rgba(255, 255, 255, .07);

  --ts-success:       #34D399;
  --ts-success-soft:  rgba(52, 211, 153, .14);
  --ts-warning:       #FBBF24;
  --ts-warning-soft:  rgba(251, 191, 36, .14);
  --ts-danger:        #F87171;
  --ts-danger-soft:   rgba(248, 113, 113, .14);
  --ts-info:          #38BDF8;
  --ts-info-soft:     rgba(56, 189, 248, .14);

  --ts-sidebar-bg:      #111419;
  --ts-sidebar-border:  rgba(255, 255, 255, .07);
  --ts-sidebar-text:    #B7BEC9;
  --ts-sidebar-muted:   #7E8797;
  --ts-sidebar-active-bg: var(--ts-accent-soft);
  --ts-sidebar-hover-bg:  rgba(255, 255, 255, .05);
  --ts-navbar-bg:       rgba(17, 20, 25, .82);
  --ts-navbar-border:   rgba(255, 255, 255, .07);

  --ts-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .40);
  --ts-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, .50), 0 8px 20px -6px rgba(0, 0, 0, .55);
  --ts-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .62), 0 4px 12px -6px rgba(0, 0, 0, .50);
  --ts-shadow-pop: 0 20px 48px -14px rgba(0, 0, 0, .70), 0 6px 16px -8px rgba(0, 0, 0, .55);
}