/*
 * MaiLens Studio Theme Tokens v2
 * Purpose: single UI authority for color, typography, spacing-facing status semantics.
 * Scope: Studio / Movie / Daily Comic web UI.
 * Brand direction: black + white foundation, cool-grey neutrals, blue as the primary UI accent.
 * Red / green / amber are semantic status colors only.
 */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------ */
  /* FONT AUTHORITY                                                      */
  /* ------------------------------------------------------------------ */
  --ml-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ml-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --ml-font-weight-regular: 400;
  --ml-font-weight-medium: 500;
  --ml-font-weight-semibold: 600;
  --ml-font-weight-bold: 700;

  --ml-type-xs: 0.6875rem;       /* 11px */
  --ml-type-sm: 0.75rem;         /* 12px */
  --ml-type-meta: 0.75rem;       /* 12px */
  --ml-type-nav: 0.8125rem;      /* 13px */
  --ml-type-label: 0.8125rem;    /* 13px */
  --ml-type-body-secondary: 0.875rem; /* 14px */
  --ml-type-body: 0.9375rem;     /* 15px */
  --ml-type-card-title: 1rem;    /* 16px */
  --ml-type-heading-section: 1.125rem; /* 18px */
  --ml-type-heading-page: 1.375rem;    /* 22px */
  --ml-type-heading-max: 1.625rem;     /* 26px */

  --ml-leading-tight: 1.2;
  --ml-leading-ui: 1.35;
  --ml-leading-body: 1.5;

  --ml-letter-tight: -0.015em;
  --ml-letter-ui: -0.005em;
  --ml-letter-caps: 0.08em;

  /* ------------------------------------------------------------------ */
  /* BRAND                                                               */
  /* ------------------------------------------------------------------ */
  --ml-brand-black: #0B0D12;
  --ml-brand-white: #FFFFFF;
  --ml-brand-blue: #2563EB;
  --ml-brand-blue-hover: #1D4ED8;
  --ml-brand-blue-active: #1E40AF;
  --ml-brand-blue-soft: #EFF6FF;
  --ml-brand-blue-soft-strong: #DBEAFE;

  /* Logo signature colors: use sparingly; never as generic UI decoration. */
  --ml-brand-red: #E5252A;
  --ml-brand-green: #129447;
  --ml-brand-cool-grey: #A7ADB5;

  /* ------------------------------------------------------------------ */
  /* LAYOUT / SURFACES                                                   */
  /* ------------------------------------------------------------------ */
  --ml-layout-canvas: #F6F8FC;
  --ml-layout-topbar: #FFFFFF;
  --ml-layout-sidebar: #FBFCFE;
  --ml-layout-panel: #FFFFFF;
  --ml-layout-panel-muted: #F8FAFC;
  --ml-layout-inspector: #FFFFFF;
  --ml-layout-timeline: #F8FAFC;
  --ml-layout-track: #FFFFFF;
  --ml-layout-track-alt: #F6F8FB;
  --ml-layout-hover: #F1F5F9;
  --ml-layout-selected: #EFF6FF;
  --ml-layout-disabled: #EEF1F5;

  /* ------------------------------------------------------------------ */
  /* TEXT                                                                */
  /* ------------------------------------------------------------------ */
  --ml-text-primary: #0F172A;
  --ml-text-secondary: #334155;
  --ml-text-muted: #64748B;
  --ml-text-disabled: #94A3B8;
  --ml-text-inverse: #FFFFFF;
  --ml-text-accent: #1D4ED8;

  --ml-text-success: #166534;
  --ml-text-warning: #92400E;
  --ml-text-danger: #B42318;
  --ml-text-info: #1D4ED8;

  /* ------------------------------------------------------------------ */
  /* BORDER / FOCUS                                                      */
  /* ------------------------------------------------------------------ */
  --ml-border-subtle: #E2E8F0;
  --ml-border-default: #CBD5E1;
  --ml-border-strong: #94A3B8;
  --ml-border-accent: #60A5FA;
  --ml-border-success: #86C89A;
  --ml-border-warning: #F2BE75;
  --ml-border-danger: #FDA29B;
  --ml-focus-ring: #2563EB;

  /* ------------------------------------------------------------------ */
  /* INTERACTION                                                         */
  /* ------------------------------------------------------------------ */
  --ml-accent: var(--ml-brand-blue);
  --ml-accent-hover: var(--ml-brand-blue-hover);
  --ml-accent-active: var(--ml-brand-blue-active);
  --ml-accent-soft: var(--ml-brand-blue-soft);
  --ml-accent-soft-strong: var(--ml-brand-blue-soft-strong);
  --ml-accent-contrast: #FFFFFF;

  --ml-control-primary-bg: var(--ml-accent);
  --ml-control-primary-fg: var(--ml-accent-contrast);
  --ml-control-primary-hover: var(--ml-accent-hover);
  --ml-control-secondary-bg: #FFFFFF;
  --ml-control-secondary-hover: #F8FAFC;

  /* ------------------------------------------------------------------ */
  /* STATUS                                                              */
  /* Every state must use icon + text + color. Color is never sole cue. */
  /* ------------------------------------------------------------------ */
  --ml-success: #2E8B57;
  --ml-success-bg: #ECFDF3;
  --ml-success-border: #86C89A;
  --ml-success-text: #166534;

  --ml-warning: #D97706;
  --ml-warning-bg: #FFF7E8;
  --ml-warning-border: #F2BE75;
  --ml-warning-text: #92400E;

  --ml-danger: #D92D20;
  --ml-danger-bg: #FEF3F2;
  --ml-danger-border: #FDA29B;
  --ml-danger-text: #B42318;

  --ml-info: #2563EB;
  --ml-info-bg: #EFF6FF;
  --ml-info-border: #93C5FD;
  --ml-info-text: #1D4ED8;

  --ml-pending: #64748B;
  --ml-pending-bg: #F8FAFC;
  --ml-pending-border: #CBD5E1;
  --ml-pending-text: #475569;

  --ml-running: #2563EB;
  --ml-running-bg: #EFF6FF;
  --ml-running-border: #93C5FD;
  --ml-running-text: #1D4ED8;

  --ml-blocked: #B45309;
  --ml-blocked-bg: #FFF7ED;
  --ml-blocked-border: #FDBA74;
  --ml-blocked-text: #9A3412;

  --ml-canonical: #2563EB;
  --ml-canonical-bg: #EFF6FF;
  --ml-canonical-border: #60A5FA;
  --ml-canonical-text: #1D4ED8;

  /* ------------------------------------------------------------------ */
  /* SHADOW / OVERLAY                                                    */
  /* ------------------------------------------------------------------ */
  --ml-shadow-soft: rgba(15, 23, 42, 0.06);
  --ml-shadow-medium: rgba(15, 23, 42, 0.14);
  --ml-overlay-soft: rgba(15, 23, 42, 0.04);
  --ml-overlay-medium: rgba(15, 23, 42, 0.22);
  --ml-overlay-strong: rgba(15, 23, 42, 0.72);

  --ml-shadow-subtle: 0 1px 2px var(--ml-shadow-soft);
  --ml-shadow-card: 0 8px 24px var(--ml-shadow-soft);
  --ml-active-ring-shadow: 0 0 0 3px var(--ml-accent-soft-strong);

  /* ------------------------------------------------------------------ */
  /* COMPATIBILITY ALIASES                                               */
  /* ------------------------------------------------------------------ */
  --ml-bg-primary: var(--ml-layout-canvas);
  --ml-bg-secondary: var(--ml-layout-panel-muted);
  --ml-topbar-bg: var(--ml-layout-topbar);
  --ml-surface-primary: var(--ml-layout-panel);
  --ml-surface: var(--ml-layout-panel);

  /* ------------------------------------------------------------------ */
  /* DAILY / MOVIE OPERATIONAL NAV                                      */
  /* ------------------------------------------------------------------ */
  --ml-workspace-rail-width: 224px;
  --ml-topbar-height: 56px;
  --ml-workspace-header-height: 72px;

  --ml-nav-group-label: #94A3B8;
  --ml-nav-icon: #64748B;
  --ml-nav-active-bg: #EFF6FF;
  --ml-nav-active-fg: #1D4ED8;
  --ml-nav-active-border: #2563EB;

  /* Movie timeline + operational presentation tokens: still shared, one authority. */
  --ml-track-video-bg: #F4F5F7;
  --ml-track-video-border: #D0D5DD;
  --ml-track-video-text: #344054;
  --ml-track-dialogue-lead-bg: #ECF8F0;
  --ml-track-dialogue-lead-border: #69A97A;
  --ml-track-dialogue-lead-text: #287342;
  --ml-track-dialogue-support-bg: #EEF5FD;
  --ml-track-dialogue-support-border: #7BA6E4;
  --ml-track-dialogue-support-text: #245EA8;
  --ml-track-dialogue-alt-bg: #F1EDFF;
  --ml-track-dialogue-alt-border: #916EEE;
  --ml-track-dialogue-alt-text: #5F36C7;
  --ml-track-narration-bg: #F1EDFF;
  --ml-track-narration-border: #A488F0;
  --ml-track-narration-text: #6339C8;
  --ml-track-music-bg: #FFF0F6;
  --ml-track-music-border: #EDB3CB;
  --ml-track-music-text: #A43D69;
  --ml-track-ambience-bg: #EEF9FC;
  --ml-track-ambience-border: #73AAD6;
  --ml-track-ambience-text: #2C6F9E;
  --ml-track-sfx-bg: #FFF6E8;
  --ml-track-sfx-border: #E3AD75;
  --ml-track-sfx-text: #9A5A18;
  --ml-track-transition-bg: #F3F4F6;
  --ml-track-transition-border: #98A2B3;
  --ml-track-transition-text: #475467;
  --ml-timeline-playhead: #6E34EF;
  --ml-timeline-selection: #6E34EF;
  --ml-timeline-overlap: #916EEE;
  --ml-timeline-stale: #D97706;
  --ml-timeline-locked: #6E34EF;
  --ml-nav-bg: var(--ml-layout-panel);
  --ml-selection-overlay: rgba(37, 99, 235, 0.10);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--ml-font-sans);
}

body {
  font-size: var(--ml-type-body);
  line-height: var(--ml-leading-body);
  color: var(--ml-text-primary);
}

code,
pre,
.mono,
[data-mono="true"] {
  font-family: var(--ml-font-mono);
}

:focus-visible {
  outline: 3px solid var(--ml-focus-ring);
  outline-offset: 2px;
}