/* =========================================================================
   Mirroric Design System — Tokens (personal filing site subset)
   Source of truth: ../www/colors_and_type.css
   ========================================================================= */

:root {
  /* Surfaces — parchment layered tonally, never pure white */
  --canvas:                 #FEFDFB;
  --surface:                #FCFBF9;
  --surface-dim:            #F8F6F3;
  --surface-container:      #FAF9F6;
  --surface-container-high: #FDFCFA;

  /* Borders */
  --border:        #EAE6E0;
  --border-subtle: #F2F0EB;
  --border-input:  #E8E4DE;

  /* Text — ink on parchment, never #000 */
  --text-primary:   #2C2418;
  --text-secondary: #5D4F3D;
  --text-muted:     #8A7D6B;
  --text-subtle:    #B5A99A;
  --text-tertiary:  #8A7D6B;

  /* Accent — aged brass, sparingly */
  --accent:       #C4956A;
  --accent-warm:  #B8835A;
  --accent-amber: #E8A958;
  --on-accent:    #2C2418;

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

  /* 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;

  --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;

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

  --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 */
  --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;

  /* Radii */
  --radius-small:  4px;
  --radius-medium: 6px;
  --radius-large:  8px;
  --radius-xl:     10px;
  --radius-2xl:    12px;
  --radius-full:   14px;
  --radius-pill:   16px;
  --radius-button: 8px;

  /* Elevation */
  --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);
}

:root[data-theme="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;
  --blockquote-border:      #D4A574;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

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;
}

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-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; }

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;
}

.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); }

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