/* Noteful Studio design tokens, generated from design/noteful_studio_v3/tokens by concatenating its files in the order of
   styles.css without fonts.css, which wwwroot/css/fonts.css replaces. Regenerate from the source, do not edit by hand. */

/* Noteful Studio v3 — colour tokens, light and dark.
   Ramps are the palette; product code uses the semantic tokens only, so that one attribute,
   data-theme="dark" on <html>, flips every surface. Values sampled from the tmERIK client.
   Theme scope: any element with data-theme recomputes the whole semantic set, light first,
   then dark on top. So data-theme="light" inside a dark page is light again (the message
   preview), and data-theme="dark" inside a light page is dark. foundations/COLOUR.md. */
:root {
  /* ERIK navy — chrome */
  --erik-navy-950: #002952;
  --erik-navy-900: #002b55;
  --erik-navy-800: #003a73;
  --erik-navy-700: #004384;
  --erik-navy-600: #004a92;

  /* ERIK blue — interaction */
  --erik-blue-700: #00489e;
  --erik-blue-600: #005cb8;
  --erik-blue-500: #006fde;
  --erik-blue-400: #2e8bea;
  --erik-blue-300: #6fb6f4;
  --erik-blue-100: #c1e4ff;
  --erik-blue-50:  #ebf4fe;

  /* Studio teal — publishing, live state, the product mark */
  --studio-700: #00756e;
  --studio-600: #008b82;
  --studio-500: #00a39b;
  --studio-300: #6fcbc5;
  --studio-100: #d3f0ed;
  --studio-50:  #ecf8f7;

  /* Graphite silver — neutrals tinted toward the brand blue */
  --silver-0:   #ffffff;
  --silver-25:  #fafbfc;
  --silver-50:  #f4f6f8;
  --silver-100: #eaeef2;
  --silver-200: #dbe1e8;
  --silver-300: #c3ccd6;
  --silver-400: #9ba7b4;
  --silver-500: #6e7c8c;
  --silver-600: #55616f;
  --silver-700: #3d4854;
  --silver-800: #2a333c;
  --silver-900: #1b2229;

  /* Status ramps — sampled from the tmERIK grid pills */
  --success-600: #0a7d53;
  --success-500: #0fba7b;
  --success-50:  #e4f8f0;
  --warning-600: #8a5800;
  --warning-500: #f7a823;
  --warning-100: #fde3b0;
  --warning-50:  #fef3e0;
  --danger-600:  #c02525;
  --danger-500:  #f03e3e;
  --danger-50:   #fdebeb;
  --info-600:    #0b7383;
  --info-500:    #13b8cc;
  --info-50:     #e3f8fb;
}

/* ---- Light: the default, and the base of every theme scope ---- */
:root, [data-theme] {
  color-scheme: light;

  /* text */
  --text-strong:   var(--silver-900);   /* 14.8:1 on card */
  --text-body:     #333333;             /* 12.6:1, the tmERIK client's body ink */
  --text-muted:    var(--silver-600);   /* 6.3:1  labels, grid headers */
  --text-subtle:   #64707e;             /* 4.9:1  notes, hints, captions */
  --text-disabled: var(--silver-400);   /* placeholders only, never text a reader must read */
  --text-inverse:  #ffffff;
  --text-link:     var(--erik-blue-600);
  --text-link-hover: var(--erik-blue-700);
  --icon-subtle:   var(--silver-400);   /* icons and disabled glyphs, never copy */

  /* surfaces */
  --surface-ground:   var(--silver-100); /* the page, under the blocks */
  --surface-card:     var(--silver-0);   /* a block, a card, a dialog, a menu */
  --surface-card-alt: var(--silver-25);  /* a head inside a block */
  --surface-tint:     var(--silver-100); /* fills inside a block: chips, code, meters, the secondary button */
  --surface-hover:    var(--erik-blue-50);
  --surface-selected: var(--erik-blue-100);
  --surface-overlay:  rgba(27, 34, 41, .48);
  --surface-sunken:   var(--surface-tint); /* alias for one release; use --surface-tint */
  --surface-app:      var(--surface-ground); /* alias for one release */

  /* borders: fields and dividers inside a block; never around a block */
  --border-subtle:  var(--silver-100);
  --border-default: #dee2e6;
  --border-field:   var(--silver-300);
  --border-focus:   var(--erik-blue-500);

  /* chrome */
  --chrome-topbar:   var(--erik-navy-600);
  --chrome-sidebar:  linear-gradient(180deg, var(--erik-navy-600) 0%, var(--erik-navy-950) 100%);
  --chrome-hover:    rgba(0, 111, 222, .30);
  --chrome-active:   var(--erik-blue-500);
  --chrome-divider:  rgba(255, 255, 255, .14);
  --text-on-chrome:  rgba(255, 255, 255, .80);
  --text-on-chrome-strong: #ffffff;
  --text-on-chrome-muted:  rgba(255, 255, 255, .62);

  /* status: ink on its own bg clears 4.5:1 */
  --success-ink: var(--success-600); --success-bg: var(--success-50); --success-mark: var(--success-500);
  --warning-ink: var(--warning-600); --warning-bg: var(--warning-50); --warning-mark: var(--warning-500);
  --danger-ink:  var(--danger-600);  --danger-bg:  var(--danger-50);  --danger-mark:  var(--danger-500);
  --info-ink:    var(--info-600);    --info-bg:    var(--info-50);    --info-mark:    var(--info-500);
  --studio-ink:  var(--studio-700);  --studio-bg:  var(--studio-50);
  --scheduled-ink: var(--erik-blue-600); --scheduled-bg: var(--erik-blue-50);
  --neutral-ink: var(--silver-700);  --neutral-bg: var(--silver-100);

  /* buttons — BUTTONS.md */
  --btn-primary:      var(--erik-blue-500);
  --btn-publish:      var(--studio-700);
  --btn-secondary:    var(--surface-tint);
  --btn-secondary-ink: var(--text-body);
  --btn-danger:       var(--danger-bg);
  --btn-danger-ink:   var(--danger-ink);
  --btn-danger-solid: var(--danger-600);
  --state-layer:      27, 34, 41;   /* rgb of the hover and press layer */

  /* focus */
  --focus-ring:         0 0 0 3px rgba(0, 111, 222, .28);
  --focus-ring-publish: 0 0 0 3px rgba(0, 163, 155, .30);

  /* selection, and a search match */
  --selection-bg: var(--erik-blue-100);
  --mark-bg:  var(--warning-100);   /* a word a search found, behind --mark-ink */
  --mark-ink: var(--text-strong);   /* 12.8:1 on --mark-bg */

  /* needed fields — pages/EDITOR.md, What is needed */
  --need-ink: var(--scheduled-ink);  /* the REQUIRED caption and the tab count, 5.6:1 on card */
  --need-bg:  var(--scheduled-bg);   /* ground of the tab count */
  --need-met: var(--success-ink);    /* the check after a filled field's label, 5.0:1 */
}

/* ---- Dark: the working surfaces go graphite, the chrome stays navy ----
   Overrides only; the light block above supplies the rest on the same element. */
[data-theme="dark"] {
  color-scheme: dark;

  --text-strong:   #f2f5f8;  /* 14.9:1 on card */
  --text-body:     #dde3ea;  /* 12.6:1 */
  --text-muted:    #b3bec9;  /* 8.6:1 */
  --text-subtle:   #909caa;  /* 5.8:1 on card, 4.8:1 on tint */
  --text-disabled: #5f6b78;
  --text-link:     var(--erik-blue-300);  /* 7.5:1 */
  --text-link-hover: #a3d1f8;
  --icon-subtle:   #6e7c8c;

  --surface-ground:   #0f141a;
  --surface-card:     #1a2128;
  --surface-card-alt: #1f2730;
  --surface-tint:     #263039;
  --surface-hover:    #22303e;
  --surface-selected: #123a5e;
  --surface-overlay:  rgba(0, 0, 0, .60);

  --border-subtle:  #262f39;
  --border-default: #313c48;
  --border-field:   #46525f;
  --border-focus:   var(--erik-blue-400);

  --chrome-topbar:  var(--erik-navy-900);
  --chrome-sidebar: linear-gradient(180deg, var(--erik-navy-900) 0%, #001a36 100%);
  --chrome-hover:   rgba(46, 139, 234, .22);

  --success-ink: #5fdcaa; --success-bg: #16352d; --success-mark: #0fba7b;
  --warning-ink: #ffc46b; --warning-bg: #3a2e17; --warning-mark: #f7a823;
  --danger-ink:  #ff8f8f; --danger-bg:  #3d1f22; --danger-mark:  #f03e3e;
  --info-ink:    #62d3e3; --info-bg:    #133239; --info-mark:    #13b8cc;
  --studio-ink:  #5fd3cb; --studio-bg:  #123330;
  --scheduled-ink: #8fc3f5; --scheduled-bg: #15304c;
  --neutral-ink: #b3bec9; --neutral-bg: #263039;

  --btn-primary:      var(--erik-blue-500);
  --btn-publish:      var(--studio-700);
  --btn-danger-solid: var(--danger-600);
  --state-layer:      255, 255, 255;

  --focus-ring:         0 0 0 3px rgba(111, 182, 244, .45);
  --focus-ring-publish: 0 0 0 3px rgba(95, 211, 203, .40);

  --selection-bg: #1d4a78;
  --mark-bg:  #5a4415;               /* --mark-ink on it 8.5:1 */

  --need-ink: #8fc3f5;  /* 7.9:1 on card */
  --need-bg:  #15304c;
  --need-met: #5fdcaa;
}

/* Fourteen steps, each a complete font shorthand. foundations/TYPE.md. Three weights. */
:root {
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-16: 16px;
  --text-24: 24px; --text-30: 30px; --text-38: 38px;

  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  --tracking-wordmark: .02em; --tracking-caps: .08em; --tracking-tight: -.01em;

  --type-display:    var(--weight-semibold) var(--text-30)/1.15 var(--font-display);
  --type-title:      var(--weight-semibold) var(--text-24)/var(--leading-tight) var(--font-display);
  --type-heading:    var(--weight-semibold) var(--text-16)/var(--leading-snug) var(--font-display);
  --type-subheading: var(--weight-semibold) var(--text-14)/var(--leading-snug) var(--font-sans);
  --type-body:       var(--weight-regular)  var(--text-14)/var(--leading-normal) var(--font-sans);
  --type-ui:         var(--weight-regular)  var(--text-13)/1.4 var(--font-sans);
  --type-ui-strong:  var(--weight-semibold) var(--text-13)/1 var(--font-sans);
  --type-label:      var(--weight-semibold) var(--text-12)/1.3 var(--font-sans);
  --type-note:       var(--weight-regular)  var(--text-12)/1.4 var(--font-sans);
  --type-note-sm:    var(--weight-regular)  var(--text-11)/1.35 var(--font-sans);
  --type-caps:       var(--weight-semibold) var(--text-11)/1.3 var(--font-sans);
  --type-mono:       var(--weight-regular)  var(--text-12)/1.45 var(--font-mono);
  --type-mono-body:  var(--weight-regular)  var(--text-13)/1.7 var(--font-mono);
  --type-metric:     var(--weight-regular)  var(--text-38)/1.1 var(--font-display);
}

:root {
  --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px;
  --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 48px; --space-12: 64px;

  /* shell — foundations/LAYOUT.md */
  --shell-topbar-h: 44px;
  --shell-sidebar-w: 248px;
  --shell-sidebar-w-collapsed: 56px;
  --shell-toolbar-h: 56px;
  --shell-tabs-h: 48px;
  --shell-gutter: 16px;
  --shell-inspector-rail-w: 48px;
  --notice-w: 520px;

  /* controls — DevExpress compact */
  --control-h-sm: 26px; --control-h-md: 32px; --control-h-lg: 38px;
  --row-h-grid: 34px; --row-h-grid-dense: 28px;

  --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-pill: 999px;
}

/* Flat: no gradients on surfaces or controls. Shadows only lift what floats: blocks sit, menus and notices hover,
   dialogs and drawers lie over. Graphite in light, black in dark. */
:root, [data-theme] {
  --shadow-block:  0 1px 2px rgba(27, 34, 41, .08);
  --shadow-float:  0 8px 20px rgba(27, 34, 41, .13), 0 2px 6px rgba(27, 34, 41, .07);
  --shadow-drawer: -12px 0 32px rgba(27, 34, 41, .16);
  --shadow-lg: var(--shadow-float); /* alias for one release */
  --gradient-login: linear-gradient(160deg, #0d3b5f 0%, #1c6bb0 45%, #378fe6 100%);
}
[data-theme="dark"] {
  --shadow-block:  0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-float:  0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-drawer: -12px 0 32px rgba(0, 0, 0, .5);
}

:root {
  --duration-instant: 90ms; --duration-fast: 130ms; --duration-base: 180ms; --duration-slow: 260ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, 1, 1);
  --transition-control: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  --transition-panel: transform var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: var(--type-body); color: var(--text-body); background: var(--surface-ground);
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
/* A theme scope below <html> paints its own ground and ink, so nothing inherits from the theme outside. */
[data-theme]:not(:root) { color: var(--text-body); background: var(--surface-card); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--text-strong); }
b, strong { font-weight: var(--weight-semibold); }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
code, kbd, samp { font: var(--type-mono); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--selection-bg); color: var(--text-strong); }
.material-symbols-rounded { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; font-size: 20px; line-height: 1; vertical-align: middle; user-select: none; }