/* ============================================================
   WinUI 3 / Fluent 2 — Color, Type, Spacing tokens
   Based on Microsoft's published Common_themeresources
   ============================================================ */

:root {
  /* ============ COLOR — LIGHT THEME (default) ============ */

  /* System accent — Fluent 2 puts the *Dark 1* variant on light theme so accent
     contrasts on a light surface. #0078D4 is the canonical "system accent"
     but the *fill* you see on a light-theme accent button is #005FB8. */
  --accent-default:        #005FB8;
  --accent-secondary:      #1A6FBE;
  --accent-tertiary:       #2D7BC4;
  --accent-base:           #0078D4;     /* the canonical SystemAccentColor */
  --accent-light-1:        #429CE3;
  --accent-light-2:        #76B9ED;
  --accent-light-3:        #A9D3F2;
  --accent-dark-1:         #005A9E;
  --accent-dark-2:         #004578;
  --accent-dark-3:         #002642;

  /* Text fill — alpha on base */
  --text-primary:          rgba(0, 0, 0, 0.8956);
  --text-secondary:        rgba(0, 0, 0, 0.6063);
  --text-tertiary:         rgba(0, 0, 0, 0.4458);
  --text-disabled:         rgba(0, 0, 0, 0.3614);
  --text-on-accent:        #FFFFFF;
  --text-on-accent-secondary: rgba(255, 255, 255, 0.70);
  --text-on-accent-disabled: rgba(255, 255, 255, 0.70);

  /* Surface fills — control internal */
  --control-fill-default:  rgba(255, 255, 255, 0.70);
  --control-fill-secondary:rgba(249, 249, 249, 0.50);
  --control-fill-tertiary: rgba(249, 249, 249, 0.30);
  --control-fill-disabled: rgba(249, 249, 249, 0.30);
  --control-fill-input-active: #FFFFFF;

  /* Subtle fills — for ghost buttons, list rows */
  --subtle-transparent:    transparent;
  --subtle-secondary:      rgba(0, 0, 0, 0.0373);
  --subtle-tertiary:       rgba(0, 0, 0, 0.0241);
  --subtle-disabled:       transparent;

  /* Layer / card backgrounds (above Mica) */
  --layer-default:         rgba(255, 255, 255, 0.50);
  --layer-alt:             #FFFFFF;
  --card-background-default: rgba(255, 255, 255, 0.70);
  --card-background-secondary: rgba(246, 246, 246, 0.50);

  /* Base background (Mica approximation) */
  --solid-background-base: #F3F3F3;
  --solid-background-base-alt: #DADADA;
  --solid-background-secondary: #EEEEEE;
  --solid-background-tertiary: #F9F9F9;
  --solid-background-quarternary: #FFFFFF;
  --mica-base:             #F3F3F3;
  --mica-alt:              #E8E8E8;

  /* Borders — alpha on base */
  --border-default:        rgba(0, 0, 0, 0.0578);
  --border-secondary:      rgba(0, 0, 0, 0.1622);
  --control-stroke-default:rgba(0, 0, 0, 0.0578);
  --control-stroke-secondary: rgba(0, 0, 0, 0.1622);
  --control-stroke-input-bottom: rgba(0, 0, 0, 0.45);
  --divider-stroke:        rgba(0, 0, 0, 0.0803);

  /* Accent control fills */
  --accent-fill-default:   #005FB8;
  --accent-fill-secondary: rgba(0, 95, 184, 0.90);
  --accent-fill-tertiary:  rgba(0, 95, 184, 0.80);
  --accent-fill-disabled:  rgba(0, 0, 0, 0.2169);

  /* Semantic (Critical / Caution / Success / Attention) */
  --critical-default:      #C42B1C;
  --critical-background:   #FDE7E9;
  --critical-stroke:       #ECB4B9;
  --caution-default:       #9D5D00;
  --caution-background:    #FFF4CE;
  --caution-stroke:        #F0CB44;
  --success-default:       #0F7B0F;
  --success-background:    #DFF6DD;
  --success-stroke:        #92C353;
  --attention-default:     #005FB7;
  --attention-background:  #E0EFF9;
  --attention-stroke:      #B4D5EE;

  /* Smoke layer (modal backdrop) */
  --smoke-default:         rgba(0, 0, 0, 0.30);

  /* Focus stroke */
  --focus-stroke-outer:    #000000;
  --focus-stroke-inner:    #FFFFFF;

  /* ============ TYPE ============ */
  --font-system:           "Segoe UI Variable", "Segoe UI Variable Display", "Segoe UI", system-ui, "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:             "Cascadia Code", "Cascadia Mono", ui-monospace, "Consolas", "Courier New", monospace;

  /* Type ramp — Fluent 2 */
  --type-caption-size:     12px;
  --type-caption-line:     16px;
  --type-caption-weight:   400;

  --type-body-size:        14px;
  --type-body-line:        20px;
  --type-body-weight:      400;

  --type-body-strong-size: 14px;
  --type-body-strong-line: 20px;
  --type-body-strong-weight: 600;

  --type-body-large-size:  18px;
  --type-body-large-line:  24px;
  --type-body-large-weight:400;

  --type-subtitle-size:    20px;
  --type-subtitle-line:    28px;
  --type-subtitle-weight:  600;

  --type-title-size:       28px;
  --type-title-line:       36px;
  --type-title-weight:     600;

  --type-title-large-size: 40px;
  --type-title-large-line: 52px;
  --type-title-large-weight: 600;

  --type-display-size:     68px;
  --type-display-line:     92px;
  --type-display-weight:   600;

  /* ============ SPACING — 4 px grid ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-14:  56px;
  --space-20:  80px;

  /* Padding shorthands for controls */
  --control-padding-x: 12px;
  --control-padding-y: 5px;
  --control-height-sm: 24px;
  --control-height-md: 32px;
  --control-height-lg: 40px;

  /* ============ RADII ============ */
  --radius-control:        4px;   /* buttons, inputs, toggles */
  --radius-overlay:        8px;   /* cards, flyouts, dialogs */
  --radius-circle:         9999px;

  /* ============ ELEVATION ============ */
  --shadow-card:           0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-tooltip:        0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow-flyout:         0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow-dialog:         0 32px 64px rgba(0, 0, 0, 0.18);
  --shadow-inset-input:    inset 0 -1px 0 var(--control-stroke-input-bottom);

  /* ============ MOTION ============ */
  --ease-fluent:           cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-fluent-accelerate:cubic-bezier(0.7, 0, 1, 0.5);
  --ease-fluent-decelerate:cubic-bezier(0.1, 0.9, 0.2, 1);
  --dur-fast:              167ms;
  --dur-normal:            250ms;
  --dur-slow:              333ms;

  /* ============ WINDOW & SHELL DIMENSIONS (Fluent 2 / WinUI 3) ============ */
  --shell-window-radius:   7px;          /* Win11 window corner */
  --shell-titlebar-height: 48px;         /* Tall title bar */
  --shell-titlebar-caption-width: 144px; /* 3 × 48 caption buttons */
  --shell-sidenav-width:   280px;        /* expanded */
  --shell-sidenav-collapsed: 48px;       /* compact */
  --shell-navitem-height:  40px;
  --shell-page-header:     63px;
  --shell-content-padding: 24px;
  --shell-scrollbar:       14px;

  /* ============ MATERIALS (web approximation) ============ */
  --mica-bg:               rgba(243, 243, 243, 0.85);
  --mica-blur:             blur(60px) saturate(125%);
  --acrylic-bg:            rgba(252, 252, 252, 0.70);
  --acrylic-blur:          blur(30px) saturate(150%);
}

/* ============ DARK THEME ============ */
[data-theme="dark"], .theme-dark {
  --accent-default:        #60CDFF;
  --accent-secondary:      #4CC2FF;
  --accent-tertiary:       #47B1E8;

  --text-primary:          #FFFFFF;
  --text-secondary:        rgba(255, 255, 255, 0.786);
  --text-tertiary:         rgba(255, 255, 255, 0.5442);
  --text-disabled:         rgba(255, 255, 255, 0.3628);
  --text-on-accent:        #000000;
  --text-on-accent-secondary: rgba(0, 0, 0, 0.50);

  --control-fill-default:  rgba(255, 255, 255, 0.0605);
  --control-fill-secondary:rgba(255, 255, 255, 0.0837);
  --control-fill-tertiary: rgba(255, 255, 255, 0.0326);
  --control-fill-disabled: rgba(255, 255, 255, 0.0419);
  --control-fill-input-active: rgba(30, 30, 30, 0.70);

  --subtle-secondary:      rgba(255, 255, 255, 0.0605);
  --subtle-tertiary:       rgba(255, 255, 255, 0.0419);

  --layer-default:         rgba(255, 255, 255, 0.0538);
  --layer-alt:             rgba(255, 255, 255, 0.0373);
  --card-background-default: rgba(255, 255, 255, 0.0512);
  --card-background-secondary: rgba(255, 255, 255, 0.0326);

  --solid-background-base: #202020;
  --solid-background-base-alt: #0A0A0A;
  --solid-background-secondary: #1C1C1C;
  --solid-background-tertiary: #282828;
  --solid-background-quarternary: #2C2C2C;
  --mica-base:             #202020;
  --mica-alt:              #2B2B2B;

  --border-default:        rgba(255, 255, 255, 0.0837);
  --border-secondary:      rgba(255, 255, 255, 0.1004);
  --control-stroke-default:rgba(255, 255, 255, 0.0837);
  --control-stroke-secondary: rgba(255, 255, 255, 0.1004);
  --control-stroke-input-bottom: rgba(255, 255, 255, 0.5442);
  --divider-stroke:        rgba(255, 255, 255, 0.0837);

  --accent-fill-default:   #60CDFF;
  --accent-fill-secondary: rgba(96, 205, 255, 0.90);
  --accent-fill-tertiary:  rgba(96, 205, 255, 0.80);
  --accent-fill-disabled:  rgba(255, 255, 255, 0.1581);

  --critical-default:      #FF99A4;
  --critical-background:   #442726;
  --caution-default:       #FCE100;
  --caution-background:    #433519;
  --success-default:       #6CCB5F;
  --success-background:    #393D1B;
  --attention-default:     #60CDFF;
  --attention-background:  #173040;

  --smoke-default:         rgba(0, 0, 0, 0.30);

  --focus-stroke-outer:    #FFFFFF;
  --focus-stroke-inner:    #000000;

  --shadow-card:           0 2px 4px rgba(0, 0, 0, 0.13);
  --shadow-tooltip:        0 4px 8px rgba(0, 0, 0, 0.26);
  --shadow-flyout:         0 8px 16px rgba(0, 0, 0, 0.26);
  --shadow-dialog:         0 32px 64px rgba(0, 0, 0, 0.37);

  --mica-bg:               rgba(32, 32, 32, 0.85);
  --acrylic-bg:            rgba(44, 44, 44, 0.70);
}

/* ============ SEMANTIC ELEMENT STYLES ============ */
html, body {
  font-family: var(--font-system);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  color: var(--text-primary);
  background: var(--solid-background-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .type-title-large {
  font-size: var(--type-title-large-size);
  line-height: var(--type-title-large-line);
  font-weight: var(--type-title-large-weight);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .type-title {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
  letter-spacing: 0;
  margin: 0;
}

h3, .type-subtitle {
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  font-weight: var(--type-subtitle-weight);
  margin: 0;
}

h4, .type-body-large {
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  font-weight: var(--type-body-large-weight);
  margin: 0;
}

p, .type-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  margin: 0;
}

.type-body-strong {
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line);
  font-weight: var(--type-body-strong-weight);
}

.type-caption, small {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  color: var(--text-secondary);
}

.type-display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--type-display-weight);
  letter-spacing: -0.02em;
}

code, kbd, samp, .type-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
}

a {
  color: var(--accent-default);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Mica + acrylic helpers */
.mica {
  background: var(--mica-bg);
  backdrop-filter: var(--mica-blur);
  -webkit-backdrop-filter: var(--mica-blur);
}
.acrylic {
  background: var(--acrylic-bg);
  backdrop-filter: var(--acrylic-blur);
  -webkit-backdrop-filter: var(--acrylic-blur);
}

/* Focus ring (two-stroke Fluent style) */
.fluent-focus:focus-visible {
  outline: 2px solid var(--focus-stroke-outer);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--focus-stroke-inner);
  border-radius: var(--radius-control);
}