/* MaiLens canonical responsive-web brand token authority.
   Binding authority: MAILENS-BRAND-THEME-UIUX-HARD-BINDING-V1. */
:root {
  color-scheme: light;

  /* Owner-approved foundation */
  --ml-ink: #0A0A0C;
  --ml-charcoal: #121418;
  --ml-white: #FFFFFF;
  --ml-mist: #F3F4F6;
  --ml-silver: #B8BEC7;

  /* Owner-approved signature, exact order: red -> green -> cool grey -> blue */
  --ml-signal-red: #FF3B30;
  --ml-signal-green: #19C15F;
  --ml-accent-grey: #C7CCD3;
  --ml-signal-blue: #2F6BFF;

  /* Canonical compact application typography.
     Owner CR-UIUX-001: ordinary application text must not exceed visual H4 (20px). */
  --ml-type-heading-max: 20px;
  --ml-type-heading-section: 18px;
  --ml-type-card-title: 16px;
  --ml-type-body: 15px;
  --ml-type-body-secondary: 14px;
  --ml-type-label: 13px;
  --ml-type-meta: 12px;
  --ml-type-nav: 11px;

  /* Semantic light theme */
  --ml-bg-primary: var(--ml-white);
  --ml-bg-secondary: var(--ml-mist);
  --ml-surface-primary: var(--ml-white);
  --ml-surface-raised: var(--ml-white);
  --ml-surface-strong: var(--ml-ink);
  --ml-text-primary: var(--ml-ink);
  --ml-text-secondary: #4B4F57;
  --ml-text-muted: #6F7680;
  --ml-text-inverse: var(--ml-white);
  --ml-border-subtle: #E3E6EA;
  --ml-border-strong: var(--ml-silver);
  --ml-focus-ring: var(--ml-signal-blue);
  --ml-create-plus-fg: #F4C430;

  /* Operational semantic colors. Color communicates state; neutral remains the product foundation. */
  --ml-status-success-fg: #216E3A;
  --ml-status-success-bg: #EDF8F1;
  --ml-status-success-border: #A7DDB8;
  --ml-status-warning-fg: #8A5A00;
  --ml-status-warning-bg: #FFF7E6;
  --ml-status-warning-border: #E7C77A;
  --ml-status-danger-fg: #B42318;
  --ml-status-danger-bg: #FFF1F0;
  --ml-status-danger-border: #E7B8B4;
  --ml-status-info-fg: #1D4ED8;
  --ml-status-info-bg: #EEF4FF;
  --ml-status-info-border: #B7CBFF;
  --ml-status-neutral-fg: #58606B;
  --ml-status-neutral-bg: #F3F4F6;
  --ml-status-neutral-border: #D7DBE0;
  --ml-accent-creative-fg: #6D28D9;
  --ml-accent-creative-bg: #F6F1FF;
  --ml-accent-creative-border: #D7C6FF;

  /* Interaction semantics: blue is interactive or active/in-progress. */
  --ml-link-fg: var(--ml-status-info-fg);
  --ml-active-line: var(--ml-signal-blue);
  --ml-progress-active: var(--ml-signal-blue);

  /* Media/overlay semantics */
  --ml-media-bg: var(--ml-ink);
  --ml-media-surface: var(--ml-charcoal);
  --ml-on-media: var(--ml-white);
  --ml-on-media-muted: rgba(255, 255, 255, .78);
  --ml-on-media-soft: rgba(255, 255, 255, .90);
  --ml-on-media-border: rgba(255, 255, 255, .38);
  --ml-media-control-bg: rgba(18, 20, 24, .58);
  --ml-media-badge-bg: rgba(10, 10, 12, .38);
  --ml-media-scrim: linear-gradient(to top, rgba(10, 10, 12, .76) 0%, rgba(10, 10, 12, .16) 38%, rgba(10, 10, 12, .12) 100%);
  --ml-media-text-shadow: 0 1px 8px rgba(0, 0, 0, .50);

  /* Restrained neutral placeholders: no generic AI/RGB gradient. */
  --ml-placeholder-one: radial-gradient(circle at 25% 20%, #4A505A 0, #24282E 34%, #0A0A0C 74%);
  --ml-placeholder-two: radial-gradient(circle at 70% 28%, #3E444D 0, #20242A 39%, #0A0A0C 76%);
  --ml-placeholder-three: radial-gradient(circle at 40% 80%, #454A52 0, #23272C 37%, #0A0A0C 77%);
  --ml-thumb-neutral: linear-gradient(145deg, #24282E, #6F7680);

  /* Component material tokens */
  --ml-control-primary-bg: var(--ml-ink);
  --ml-control-primary-fg: var(--ml-white);
  --ml-control-secondary-bg: var(--ml-white);
  --ml-control-secondary-fg: var(--ml-ink);
  --ml-control-selected-bg: var(--ml-ink);
  --ml-control-selected-fg: var(--ml-white);
  --ml-control-muted-fg: #6F7680;
  --ml-topbar-bg: rgba(255, 255, 255, .92);
  --ml-nav-bg: rgba(255, 255, 255, .95);
  --ml-modal-backdrop: rgba(10, 10, 12, .54);
  --ml-shadow-raised: 0 18px 55px rgba(10, 10, 12, .10);
  --ml-shadow-subtle: 0 1px 5px rgba(10, 10, 12, .07);
  --ml-focus-shadow: 0 0 0 3px rgba(47, 107, 255, .24);
  --ml-active-ring-shadow: 0 0 0 1px var(--ml-text-primary) inset;
  --ml-progress-ring-shadow: 0 0 0 5px rgba(10, 10, 12, .08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ml-bg-primary: var(--ml-ink);
  --ml-bg-secondary: var(--ml-charcoal);
  --ml-surface-primary: var(--ml-charcoal);
  --ml-surface-raised: #181B20;
  --ml-surface-strong: var(--ml-white);
  --ml-text-primary: var(--ml-white);
  --ml-text-secondary: #D4D7DC;
  --ml-text-muted: #A4AAB3;
  --ml-text-inverse: var(--ml-ink);
  --ml-border-subtle: #2A2E35;
  --ml-border-strong: #4A505A;
  --ml-focus-ring: var(--ml-signal-blue);
  --ml-create-plus-fg: #A66F00;

  --ml-status-success-fg: #9ED7B4;
  --ml-status-success-bg: #173522;
  --ml-status-success-border: #356A46;
  --ml-status-warning-fg: #F2C66D;
  --ml-status-warning-bg: #352A12;
  --ml-status-warning-border: #6F5726;
  --ml-status-danger-fg: #FFB4AB;
  --ml-status-danger-bg: #3A1E1B;
  --ml-status-danger-border: #74443F;
  --ml-status-info-fg: #AFC6FF;
  --ml-status-info-bg: #17264A;
  --ml-status-info-border: #3F5D9E;
  --ml-status-neutral-fg: #C2C7CF;
  --ml-status-neutral-bg: #20242A;
  --ml-status-neutral-border: #4A505A;
  --ml-accent-creative-fg: #C4B5FD;
  --ml-accent-creative-bg: #2B2044;
  --ml-accent-creative-border: #5B4780;

  --ml-control-primary-bg: var(--ml-white);
  --ml-control-primary-fg: var(--ml-ink);
  --ml-control-secondary-bg: var(--ml-charcoal);
  --ml-control-secondary-fg: var(--ml-white);
  --ml-control-selected-bg: var(--ml-white);
  --ml-control-selected-fg: var(--ml-ink);
  --ml-control-muted-fg: #A4AAB3;
  --ml-topbar-bg: rgba(10, 10, 12, .90);
  --ml-nav-bg: rgba(10, 10, 12, .95);
  --ml-modal-backdrop: rgba(0, 0, 0, .68);
  --ml-shadow-raised: 0 18px 55px rgba(0, 0, 0, .34);
  --ml-shadow-subtle: 0 1px 5px rgba(0, 0, 0, .26);
  --ml-focus-shadow: 0 0 0 3px rgba(47, 107, 255, .34);
  --ml-active-ring-shadow: 0 0 0 1px var(--ml-text-primary) inset;
  --ml-progress-ring-shadow: 0 0 0 5px rgba(255, 255, 255, .10);
  --ml-thumb-neutral: linear-gradient(145deg, #181B20, #4A505A);
}