/* =========================================================================
   Mirroric Design System — Tokens
   Source of truth: looplj/mirroric@master
     - lib/shared/theme/mirroric_colors.dart
     - lib/shared/theme/mirroric_typography.dart
     - lib/shared/theme/mirroric_spacing.dart
     - DESIGN.md, PRODUCT.md

   Default palette: "Mirroric" (warm, literary, parchment).
   The repo ships ten palettes: mirroric (default), cartographer, ink-wash,
   ember, ivory, classic, azure, verdant, violet, crimson, nebula — each with
   a paired *Dark variant. The semantic tokens stay stable across themes; the
   color values shift.

   Typography uses Georgia for manuscript/authored content and system sans for
   UI/management copy. This is "The Manuscript vs. Mechanism Rule".
   ========================================================================= */

:root {
  /* ---- Default theme: Mirroric (light) ------------------------------- */

  /* Surfaces — parchment layered tonally, never pure white */
  --canvas:                 #FEFDFB; /* outermost app background */
  --surface:                #FCFBF9; /* editor + primary content */
  --surface-dim:            #F8F6F3; /* sidebars / secondary zones */
  --surface-container:      #FAF9F6; /* toolbars, title bars, status */
  --surface-container-high: #FDFCFA; /* inputs, AI panels, raised */

  /* Borders */
  --border:        #EAE6E0; /* primary dividers */
  --border-subtle: #F2F0EB; /* internal dividers */
  --border-input:  #E8E4DE; /* inputs, cards, dropdowns */

  /* Text — ink on parchment, never #000 */
  --text-primary:   #2C2418; /* body + headings */
  --text-secondary: #5D4F3D; /* labels + quieter controls */
  --text-muted:     #8A7D6B; /* hints + metadata */
  --text-subtle:    #B5A99A; /* timestamps + low-priority meta */
  --text-tertiary:  #8A7D6B;

  /* Accent — aged brass, sparingly */
  --accent:       #C4956A; /* primary actions, active, selected */
  --accent-warm:  #B8835A; /* secondary warmth, avatars */
  --accent-amber: #E8A958; /* AI avatar accents, small emphasis */
  --on-accent:    #2C2418;

  /* States */
  --selected: #F2EDE6;
  --hover:    #F7F4EF;

  /* Semantic (diffs + validation) */
  --deletion-bg:     #FDE8E8;
  --deletion-border: #C53030;
  --addition-bg:     #E8F5E8;
  --addition-border: #4A7C59;
  --warning-bg:      #FEF3C7;
  --warning-text:    #D97706;
  --success:         #4A7C59;
  --error:           #C53030;

  /* Literary detail */
  --blockquote-border: #D4A574;

  /* ---- Typography -------------------------------------------------- */

  --font-serif:  Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  --font-sans:   system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Manuscript scale — Georgia, generous leading */
  --type-display-size:        28px;
  --type-display-weight:      700;
  --type-display-line:        1.3;

  --type-heading-size:        22px;
  --type-heading-weight:      700;
  --type-heading-line:        1.3;

  --type-body-size:           16px;
  --type-body-weight:         400;
  --type-body-line:           1.75;   /* writer-first leading */

  --type-body-small-size:     14px;
  --type-body-small-weight:   400;
  --type-body-small-line:     1.5;

  /* Mechanism scale — system sans, compact */
  --type-ui-size:             13px;
  --type-ui-weight:           400;
  --type-ui-medium-weight:    500;
  --type-ui-semibold-weight:  600;
  --type-ui-line:             1.4;

  --type-ui-small-size:       12px;
  --type-ui-tiny-size:        11px;
  --type-ui-tiny-weight:      500;

  /* ---- Spacing tokens (MirroricSpacing) ---------------------------- */
  --space-xxs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  10px;
  --space-lg:  12px;
  --space-xl:  14px;
  --space-2xl: 16px;
  --space-3xl: 20px;
  --space-4xl: 24px;
  --space-5xl: 28px;
  --space-6xl: 40px;
  --editor-padding-h: 72px; /* editor horizontal padding — preserve line length */

  /* ---- Radii (MirroricRadius) -------------------------------------- */
  --radius-small:  4px;
  --radius-medium: 6px;
  --radius-large:  8px;   /* default for cards + inputs */
  --radius-xl:     10px;
  --radius-2xl:    12px;
  --radius-full:   14px;
  --radius-pill:   16px;
  --radius-button: 8px;

  /* ---- Sizes (MirroricSizes) --------------------------------------- */
  --size-sidebar:           280px;
  --size-editor-sidebar:    340px;
  --size-chat-panel:        360px;
  --size-button-h:          40px;
  --size-button-h-sm:       32px;
  --size-icon-button:       32px;
  --size-chat-bubble-r:     14px;
  --size-chat-bubble-max:   300px;
  --size-avatar-lg:         36px;
  --size-avatar-md:         28px;

  /* ---- Elevation --------------------------------------------------- */
  /* The system is intentionally FLAT. Depth comes from tonal layers +
     1px borders + selected/hover states. Custom shadows are forbidden
     on standard panels, cards, inputs, and sidebars. */
  --shadow-none:    none;
  --shadow-dialog:  0 8px 24px rgba(44, 36, 24, 0.10),
                    0 2px 8px rgba(44, 36, 24, 0.06);
  --shadow-overlay: 0 4px 16px rgba(44, 36, 24, 0.08);
}

/* ---- Dark variant (Mirroric Dark) -------------------------------- */
:root[data-theme="dark"],
.theme-mirroric-dark {
  --canvas:                 #1A1714;
  --surface:                #221E1A;
  --surface-dim:            #2A2520;
  --surface-container:      #2D2822;
  --surface-container-high: #352F28;
  --border:                 #3D362E;
  --border-subtle:          #332D26;
  --border-input:           #453D33;
  --text-primary:           #F5F0E8;
  --text-secondary:         #D4CCC0;
  --text-muted:             #A89B8C;
  --text-subtle:            #7A6F62;
  --text-tertiary:          #A89B8C;
  --accent:                 #D4A574;
  --accent-warm:            #E8B87A;
  --accent-amber:           #F6C570;
  --on-accent:              #1A1714;
  --selected:               #3D362E;
  --hover:                  #352F28;
  --deletion-bg:            #3D1F1F;
  --deletion-border:        #E53E3E;
  --addition-bg:            #1F3D2A;
  --addition-border:        #48BB78;
  --warning-bg:             #3D331F;
  --warning-text:           #F6AD55;
  --success:                #48BB78;
  --error:                  #E53E3E;
  --blockquote-border:      #D4A574;
}

/* ---- Cartographer alternate (richer brass / sepia) -------------- */
.theme-cartographer {
  --canvas: #FFFBF5;
  --surface: #FCFAF6;
  --surface-dim: #F5F0E8;
  --surface-container: #F5F1EB;
  --surface-container-high: #FAF6F0;
  --border: #E0D8CC;
  --border-subtle: #E8E2D8;
  --border-input: #E0D6CC;
  --text-primary: #2C2418;
  --text-secondary: #4A3F35;
  --text-muted: #8A7D6B;
  --text-subtle: #9E9484;
  --accent: #8B7355;
  --accent-warm: #C4956A;
  --accent-amber: #F6AD55;
  --on-accent: #FFFBF5;
  --selected: #E8E0D4;
  --hover: #EDE7DD;
}

/* ---- Ink Wash alternate (rice paper + cinnabar) ----------------- */
.theme-ink-wash {
  --canvas: #F3F0E8;
  --surface: #FAF8F2;
  --surface-dim: #E8E2D6;
  --surface-container: #F1ECE2;
  --surface-container-high: #FFFCF5;
  --border: #D4CABC;
  --border-subtle: #E5DDD0;
  --border-input: #CFC4B5;
  --text-primary: #24211D;
  --text-secondary: #4C4740;
  --text-muted: #797167;
  --text-subtle: #9D9487;
  --accent: #A63F35;          /* cinnabar */
  --accent-warm: #715A43;
  --accent-amber: #B8894F;
  --on-accent: #FFFCF5;
  --selected: #E6DDD0;
  --hover: #EEE7DB;
  --blockquote-border: #A63F35;
}

/* =========================================================================
   Semantic element styles — drop into pages for instant Mirroric flavor
   ========================================================================= */

body {
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Manuscript hierarchy — Georgia, generous */
h1, .m-display {
  font-family: var(--font-serif);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

h2, .m-heading {
  font-family: var(--font-serif);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line);
  color: var(--text-primary);
  margin: 0;
}

p, .m-body {
  font-family: var(--font-serif);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}

.m-body-small {
  font-family: var(--font-serif);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line);
  color: var(--text-secondary);
}

.m-body-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-secondary);
}

/* Mechanism — system sans, dense */
.m-ui            { font: var(--type-ui-weight)         var(--type-ui-size)/var(--type-ui-line) var(--font-sans); color: var(--text-secondary); }
.m-ui-medium     { font: var(--type-ui-medium-weight)  var(--type-ui-size)/var(--type-ui-line) var(--font-sans); color: var(--text-primary); }
.m-ui-semibold   { font: var(--type-ui-semibold-weight) var(--type-ui-size)/var(--type-ui-line) var(--font-sans); color: var(--text-primary); }
.m-ui-small      { font: 400 var(--type-ui-small-size)/var(--type-ui-line) var(--font-sans); color: var(--text-muted); }
.m-ui-tiny       { font: var(--type-ui-tiny-weight) var(--type-ui-tiny-size)/var(--type-ui-line) var(--font-sans); color: var(--text-subtle); letter-spacing: 0.5px; }
.m-ui-tiny-section {
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Markdown literary detail */
blockquote, .m-blockquote {
  border-left: 3px solid var(--blockquote-border);
  padding-left: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
}

/* Buttons (canonical) */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: var(--size-button-h);
  padding: 0 var(--space-2xl);
  border-radius: var(--radius-button);
  font: var(--type-ui-medium-weight) var(--type-ui-size)/1 var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.m-btn--primary  { background: var(--accent); color: var(--on-accent); }
.m-btn--primary:hover  { background: var(--accent-warm); }
.m-btn--secondary{ background: var(--surface); color: var(--text-secondary); border-color: var(--border-input); }
.m-btn--secondary:hover{ background: var(--hover); }
.m-btn--text     { background: transparent; color: var(--text-secondary); padding: 0 var(--space-lg); }
.m-btn--text:hover     { background: var(--hover); }
.m-btn--danger   { background: var(--deletion-border); color: #fff; }
.m-btn--sm       { height: var(--size-button-h-sm); padding: 0 var(--space-lg); }

/* Inputs */
.m-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-container-high);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  font: 400 var(--type-ui-size)/var(--type-ui-line) var(--font-sans);
  transition: border-color 120ms ease;
  outline: none;
}
.m-input::placeholder { color: var(--text-subtle); }
.m-input:focus { border-color: var(--accent); }

/* Cards / Panels */
.m-card {
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  padding: var(--space-4xl);
}
.m-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}

/* Sidebar list item */
.m-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-medium);
  cursor: pointer;
  color: var(--text-secondary);
}
.m-list-item:hover { background: var(--hover); }
.m-list-item.is-selected {
  background: var(--selected);
  color: var(--text-primary);
  font-weight: var(--type-ui-semibold-weight);
}

/* Tag dot */
.m-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-subtle);
  flex: none;
}
.m-list-item.is-selected .m-dot { background: var(--accent); }

/* Scrollbar — quiet */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }