/* ==========================================================================
   Telegram Multi-Account Scheduler — System (light/dark)
   Neutral premium palette. Light is default; dark via prefers-color-scheme
   or a forced `.dark` class on <html>. Semantic *-sub pairs pair a tinted
   surface with a darkened text tone for WCAG AA contrast.
   ========================================================================== */

@layer system, reset, components, utility;

/* ---------------- Light ---------------- */
@layer system {
  :root {
    color-scheme: light;

    /* Neutrals — calm gray, one blue-gray step toward cool */
    --bg:      #F4F5F6;
    --bg-sub:  #EBECEE;
    --bg-plain:#FFFFFF;
    --bg-elev: #FFFFFF;
    --bg-hover:#F5F6F7;
    --bg-active:#EDEEF0;

    /* Text — never pure black */
    --text-main:    #1B1F24;
    --text-soft:    #5C646E;
    --text-muted:   #7E868F;
    --text-inverse: #F7F8F9;

    /* Borders & rules */
    --border-sub: rgba(15, 19, 24, 0.08);
    --border:     rgba(15, 19, 24, 0.14);
    --border-soft:rgba(15, 19, 24, 0.05);

    /* Accent — single system blue */
    --accent:      #0A6CDB;
    --accent-sub:  #E3EEFC;
    --accent-hover:#0856AF;
    --accent-fg:   #FFFFFF;

    /* Semantic status (text + tinted surface pairs) */
    --success:      #176E43;  --success-sub: #E0F2E6;
    --warning:      #925300;  --warning-sub: #FAEDD9;
    --error:        #B4232F;  --error-sub:   #FCE9EB;
    --neutral:      #5C646E;  --neutral-sub: #ECEDEF;
    --info:         #0A6CDB;  --info-sub:    #E3EEFC;

    /* Form */
    --field-bg:    #FFFFFF;
    --field-border:#C8CDD4;
    --field-focus:#0A6CDB;
    --field-shadow: 0 0 0 3px rgba(10, 108, 219, 0.18);

    /* Overlay / backdrop */
    --overlay-bg: rgba(15, 19, 24, 0.42);

    /* Shadows reference dark-tinted values from tokens.css */
    --shadow-sm:  0 1px 2px 0 rgba(15, 19, 24, 0.06);
    --shadow-md:  0 1px 2px 0 rgba(15, 19, 24, 0.05), 0 4px 12px -2px rgba(15, 19, 24, 0.08);
    --shadow-lg:  0 4px 10px -2px rgba(15, 19, 24, 0.08), 0 16px 32px -8px rgba(15, 19, 24, 0.14);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;

      --bg:      #15181C;
      --bg-sub:  #1E2126;
      --bg-plain:#23262B;
      --bg-elev: #26292F;
      --bg-hover:#2D3137;
      --bg-active:#31353C;

      --text-main:    #ECEEF1;
      --text-soft:    #A6ADB6;
      --text-muted:   #7A828C;
      --text-inverse: #15181C;

      --border-sub: rgba(255, 255, 255, 0.07);
      --border:     rgba(255, 255, 255, 0.13);
      --border-soft:rgba(255, 255, 255, 0.04);

      --accent:      #3E96F8;
      --accent-sub:  #1B3A5C;
      --accent-hover:#6AB0FA;
      --accent-fg:   #0B0F14;

      --success:      #57BE85;  --success-sub: rgba(87, 190, 133, 0.16);
      --warning:      #E5A54B;  --warning-sub: rgba(229, 165, 75, 0.16);
      --error:        #F0717A;  --error-sub:   rgba(240, 113, 122, 0.16);
      --neutral:      #A6ADB6;  --neutral-sub: rgba(166, 173, 182, 0.18);
      --info:         #3E96F8;  --info-sub:    rgba(62, 150, 248, 0.16);

      --field-bg:    #1A1D21;
      --field-border:#41464D;
      --field-focus:#3E96F8;
      --field-shadow: 0 0 0 3px rgba(62, 150, 248, 0.24);

      --overlay-bg: rgba(6, 8, 10, 0.62);

      --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.24);
      --shadow-md:  0 1px 2px 0 rgba(0, 0, 0, 0.20), 0 4px 12px -2px rgba(0, 0, 0, 0.28);
      --shadow-lg:  0 4px 10px -2px rgba(0, 0, 0, 0.24), 0 16px 32px -8px rgba(0, 0, 0, 0.40);
    }
  }
}

/* ---------------- Forced theme classes ----------------
   html.dark forces dark; html.light overrides a dark OS preference
   (higher specificity than the :root media-query block, applied later). */
@layer system {
  html.light {
    color-scheme: light;

    --bg:      #F4F5F6;
    --bg-sub:  #EBECEE;
    --bg-plain:#FFFFFF;
    --bg-elev: #FFFFFF;
    --bg-hover:#F5F6F7;
    --bg-active:#EDEEF0;

    --text-main:    #1B1F24;
    --text-soft:    #5C646E;
    --text-muted:   #7E868F;
    --text-inverse: #F7F8F9;

    --border-sub: rgba(15, 19, 24, 0.08);
    --border:     rgba(15, 19, 24, 0.14);
    --border-soft:rgba(15, 19, 24, 0.05);

    --accent:      #0A6CDB;
    --accent-sub:  #E3EEFC;
    --accent-hover:#0856AF;
    --accent-fg:   #FFFFFF;

    --success:      #176E43;  --success-sub: #E0F2E6;
    --warning:      #925300;  --warning-sub: #FAEDD9;
    --error:        #B4232F;  --error-sub:   #FCE9EB;
    --neutral:      #5C646E;  --neutral-sub: #ECEDEF;
    --info:         #0A6CDB;  --info-sub:    #E3EEFC;

    --field-bg:    #FFFFFF;
    --field-border:#C8CDD4;
    --field-focus:#0A6CDB;
    --field-shadow: 0 0 0 3px rgba(10, 108, 219, 0.18);

    --overlay-bg: rgba(15, 19, 24, 0.42);

    --shadow-sm:  0 1px 2px 0 rgba(15, 19, 24, 0.06);
    --shadow-md:  0 1px 2px 0 rgba(15, 19, 24, 0.05), 0 4px 12px -2px rgba(15, 19, 24, 0.08);
    --shadow-lg:  0 4px 10px -2px rgba(15, 19, 24, 0.08), 0 16px 32px -8px rgba(15, 19, 24, 0.14);
  }
}

@layer system {
  html.dark {
    color-scheme: dark;

    --bg:      #15181C;
    --bg-sub:  #1E2126;
    --bg-plain:#23262B;
    --bg-elev: #26292F;
    --bg-hover:#2D3137;
    --bg-active:#31353C;

    --text-main:    #ECEEF1;
    --text-soft:    #A6ADB6;
    --text-muted:   #7A828C;
    --text-inverse: #15181C;

    --border-sub: rgba(255, 255, 255, 0.07);
    --border:     rgba(255, 255, 255, 0.13);
    --border-soft:rgba(255, 255, 255, 0.04);

    --accent:      #3E96F8;
    --accent-sub:  #1B3A5C;
    --accent-hover:#6AB0FA;
    --accent-fg:   #0B0F14;

    --success:      #57BE85;  --success-sub: rgba(87, 190, 133, 0.16);
    --warning:      #E5A54B;  --warning-sub: rgba(229, 165, 75, 0.16);
    --error:        #F0717A;  --error-sub:   rgba(240, 113, 122, 0.16);
    --neutral:      #A6ADB6;  --neutral-sub: rgba(166, 173, 182, 0.18);
    --info:         #3E96F8;  --info-sub:    rgba(62, 150, 248, 0.16);

    --field-bg:    #1A1D21;
    --field-border:#41464D;
    --field-focus:#3E96F8;
    --field-shadow: 0 0 0 3px rgba(62, 150, 248, 0.24);

    --overlay-bg: rgba(6, 8, 10, 0.62);

    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.24);
    --shadow-md:  0 1px 2px 0 rgba(0, 0, 0, 0.20), 0 4px 12px -2px rgba(0, 0, 0, 0.28);
    --shadow-lg:  0 4px 10px -2px rgba(0, 0, 0, 0.24), 0 16px 32px -8px rgba(0, 0, 0, 0.40);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body { margin: 0; font-family: var(--font-stack); background: var(--bg); color: var(--text-main); line-height: var(--lh-normal); }
  h1, h2, h3, h4, p, dl, ol, ul { margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; width: 100%; text-align: left; }
  img, svg { display: block; max-width: 100%; }
}