/* Whole-UI themes. A theme is a class on <html> (theme-docs, theme-sepia…) plus "themed".
   Each theme sets colour tokens (the same ones tokens.css defines) and shape tokens (--t-*);
   the shared layer below maps the shape tokens onto components. Every rule here is scoped to
   :root.themed, so system, light, dark and high contrast render exactly as before.
   Colours are skipped under high contrast so that setting keeps its own palette. */

/* ---------- Google Docs ---------- */
:root.theme-docs:not([data-contrast=true]){--bg:#f9fbfd;--surface:#f9fbfd;--panel:#edf2fa;--ink:#1f1f1f;--muted:#444746;--line:#c4c7c5;--accent:#1a73e8;--focus:#1a73e8;--sage:#c2e7ff;--sage-hover:#b1dbf5;--light:#f9fbfd;--paper:#fff;--paper-ink:#000;--danger:#b3261e;--shadow:0 1px 2px #3c404333,0 2px 6px 2px #3c404326;--t-popup-bg:#fff;--t-hover:#1f1f1f14;--t-primary-ink:#001d35;--t-page-shadow:0 0 0 .75pt #d1d1d1,0 0 3pt .75pt #ccc}
:root.theme-docs{--ui:"Google Sans","Google Sans Text",Roboto,Arial,sans-serif;--t-radius:4px;--t-radius-lg:8px;--t-pill:100px;--t-chrome-border:0;--t-toolbar-radius:24px;--t-toolbar-margin:4px 16px 8px;--t-toolbar-bw:0;--t-toolbar-pad:2px 10px;--t-tool-radius:4px;--t-tools-flat:1;--t-menu-size:14px;--t-menu-pad:2px 8px;--t-popup-radius:4px;--t-popup-border:0;--t-dialog-radius:8px;--t-sidebar-border:0;--t-title-size:18px;--t-title-weight:400;--t-weight:500}

/* ---------- Sepia: warm study with a serif interface and soft, rounded cards ---------- */
:root.theme-sepia:not([data-contrast=true]){--bg:#f3ecdf;--surface:#fbf6ec;--panel:#f0e6d4;--ink:#3b2f22;--muted:#76664f;--line:#e2d5bf;--accent:#8a4b1f;--focus:#a0612f;--sage:#ead6b3;--sage-hover:#e0c79c;--light:#ebe1ce;--paper:#fffaf1;--paper-ink:#3b2f22;--danger:#9b2c1c;--shadow:0 16px 40px #5a3e1f26;--t-popup-bg:#fffaf1;--t-hover:#8a4b1f14;--t-primary-ink:#3b2f22;--t-page-shadow:0 2px 3px #5a3e1f14,0 14px 34px #5a3e1f1f;--t-toolbar-bg:#fffaf1;--t-toolbar-shadow:0 4px 16px #5a3e1f14}
:root.theme-sepia{--ui:"Source Serif 4",Georgia,serif;--t-radius:10px;--t-radius-lg:18px;--t-pill:12px;--t-chrome-border:1px solid var(--line);--t-toolbar-radius:16px;--t-toolbar-margin:8px;--t-toolbar-bw:1px;--t-toolbar-pad:4px 6px;--t-tool-radius:10px;--t-menu-size:14px;--t-menu-pad:5px 12px;--t-popup-radius:14px;--t-dialog-radius:22px;--t-title-size:20px;--t-title-weight:600;--t-weight:600}

/* ---------- Midnight: deep navy, glowing blue accents, floating panels ---------- */
:root.theme-midnight:not([data-contrast=true]){--bg:#0b1020;--surface:#111831;--panel:#18213f;--ink:#e6eaf5;--muted:#9aa4c2;--line:#27325a;--accent:#7cc4ff;--focus:#7cc4ff;--sage:#2a4a8c;--sage-hover:#3459a6;--light:#0b1020;--paper:#151d38;--paper-ink:#dfe5f5;--danger:#ff9b9b;--shadow:0 0 0 1px #27325a,0 24px 60px #000a;--t-popup-bg:#141c38;--t-hover:#7cc4ff1a;--t-primary-ink:#fff;--t-page-shadow:0 0 0 1px #27325a,0 20px 50px #0009;--t-toolbar-bg:#111831;--t-toolbar-shadow:0 10px 30px #0006;--slider-track:#27325a;--slider-fill:#7cc4ff;--slider-thumb:#e6eaf5;--slider-ring:#7cc4ff}
:root.theme-midnight{--t-radius:8px;--t-radius-lg:16px;--t-pill:10px;--t-chrome-border:1px solid var(--line);--t-toolbar-radius:14px;--t-toolbar-margin:8px;--t-toolbar-bw:1px;--t-toolbar-pad:4px 6px;--t-tool-radius:8px;--t-tools-flat:1;--t-menu-pad:5px 10px;--t-popup-radius:12px;--t-dialog-radius:18px;--t-weight:600}

/* ---------- Typewriter: monochrome, square corners, hard offset shadows, monospace ---------- */
:root.theme-typewriter:not([data-contrast=true]){--bg:#f4f1ea;--surface:#fffdf8;--panel:#ece8df;--ink:#111;--muted:#4a4a4a;--line:#111;--accent:#111;--focus:#d13b2a;--sage:#ffd84d;--sage-hover:#ffcc1a;--light:#e6e1d6;--paper:#fffdf8;--paper-ink:#111;--danger:#b3261e;--shadow:5px 5px 0 #111;--t-popup-bg:#fffdf8;--t-hover:#ffd84d;--t-primary-ink:#111;--t-page-shadow:0 0 0 2px #111,7px 7px 0 #111}
:root.theme-typewriter{--ui:"JetBrains Mono",ui-monospace,monospace;--t-radius:0;--t-radius-lg:0;--t-pill:0;--t-chrome-border:2px solid var(--line);--t-toolbar-radius:0;--t-toolbar-margin:0;--t-toolbar-bw:0 0 2px;--t-toolbar-pad:6px 16px;--t-tool-radius:0;--t-menu-size:12px;--t-menu-pad:5px 10px;--t-menu-case:uppercase;--t-popup-radius:0;--t-popup-border:2px solid var(--line);--t-dialog-radius:0;--t-title-size:16px;--t-title-weight:700;--t-weight:700;--t-border-width:2px}

/* ---------- Shared themed layer ---------- */
:root.themed body{font-family:var(--ui)}
:root.themed button,:root.themed input,:root.themed select,:root.themed textarea{border-radius:var(--t-radius);border-width:var(--t-border-width,1px)}
:root.themed button:hover{background:var(--t-hover);border-color:var(--line)}
:root.themed button.flat:hover{border-color:transparent}
:root.themed button.primary,:root.themed .topbar .read-button,:root.themed .topbar .share-button{border-radius:var(--t-pill);background:var(--sage);border-color:var(--sage);color:var(--t-primary-ink);font-weight:var(--t-weight)}
:root.themed button.primary:hover,:root.themed .topbar .read-button:hover,:root.themed .topbar .share-button:hover{background:var(--sage-hover);border-color:var(--sage-hover)}
:root.themed .topbar button,:root.themed .library-quick-settings button,:root.themed .segmented{border-radius:var(--t-pill)}
:root.themed .topbar,:root.themed .menubar,:root.themed .statusbar{background:var(--surface)}
:root.themed .topbar{border-bottom:var(--t-chrome-border)}
:root.themed .statusbar{border-top:var(--t-chrome-border)}
:root.themed .topbar .book-title{font-size:var(--t-title-size,17px);font-weight:var(--t-title-weight,600);border-radius:var(--t-radius)}
:root.themed .menu summary{border-radius:var(--t-radius);padding:var(--t-menu-pad,6px 12px);font-size:var(--t-menu-size,inherit);text-transform:var(--t-menu-case,none)}
:root.themed .menu summary:hover,:root.themed .menu[open] summary{background:var(--t-hover)}
:root.themed .menu-content,:root.themed .dropdown-menu,:root.themed .command-search [data-command-results],:root.themed .selection-menu{background:var(--t-popup-bg);border-radius:var(--t-popup-radius);border:var(--t-popup-border,1px solid var(--line));box-shadow:var(--shadow)}
:root.themed .menu-content button,:root.themed .dropdown-option{border-radius:var(--t-radius)}
:root.themed .menu-content button:hover,:root.themed .dropdown-option:hover,:root.themed .dropdown-option.highlighted{background:var(--t-hover)}
:root.themed .toolbar{scrollbar-width:thin;background:var(--t-toolbar-bg,var(--panel));border:solid var(--line);border-width:var(--t-toolbar-bw,1px 0);border-radius:var(--t-toolbar-radius);margin:var(--t-toolbar-margin);padding:var(--t-toolbar-pad);box-shadow:var(--t-toolbar-shadow,none)}
:root.themed .toolbar button,:root.themed .toolbar .dropdown-trigger,:root.themed .toolbar input,:root.themed .toolbar select{border-radius:var(--t-tool-radius)}
:root.themed .table-tools{border-radius:var(--t-toolbar-radius);margin:var(--t-toolbar-margin)}
:root.themed .canvas,:root.themed[data-theme=dark] .canvas{background:var(--light)}
/* motion.css flattens pages with !important; themed editor pages bring back their own edge. */
:root.themed .editor-paper:not(.paged-editor),:root.themed .paged-editor>.editor-page{box-shadow:var(--t-page-shadow,none)!important}
:root.themed .sidebar{background:var(--surface);border-color:var(--line);border-width:var(--t-sidebar-border,var(--t-border-width,1px))}
:root.themed .outline-item{border-radius:var(--t-radius)}
:root.themed .outline-item.active{background:var(--sage);color:var(--t-primary-ink)}
:root.themed dialog{border-radius:var(--t-dialog-radius);border:var(--t-popup-border,1px solid var(--line));background:var(--t-popup-bg)}
:root.themed .format-tabs,:root.themed .settings-nav{background:var(--t-popup-bg)}
:root.themed .toast{border-radius:var(--t-radius-lg)}
:root.themed .segmented button.active{border-radius:var(--t-pill)}
:root.themed .book-card .cover,:root.themed .new-book-cover,:root.themed .template-page,:root.themed .library-quick-settings{border-radius:var(--t-radius-lg)}

/* Flat toolbar controls (Docs, Midnight): transparent until hovered or pressed. */
:root.theme-docs .toolbar button,:root.theme-docs .toolbar .dropdown-trigger,:root.theme-docs .toolbar input:not([type=color]),:root.theme-midnight .toolbar button,:root.theme-midnight .toolbar .dropdown-trigger{background:transparent;border-color:transparent}
:root.theme-docs .toolbar button:hover,:root.theme-docs .toolbar .dropdown-trigger:hover,:root.theme-midnight .toolbar button:hover,:root.theme-midnight .toolbar .dropdown-trigger:hover{background:var(--t-hover)}
:root.theme-docs .toolbar [aria-pressed=true],:root.theme-docs .toolbar .active{background:#d3e3fd;color:#041e49}

/* Google Docs details: 40px pill toolbar, compact 14px menubar flush to the title, blue focus ring. */
:root.theme-docs .topbar{padding-block:8px}
:root.theme-docs .menubar{padding-block:0;gap:0}
:root.theme-docs .menubar .command-search input{border-radius:var(--t-pill);background:#e9eef6;border-color:transparent}
:root.theme-docs .toolbar{min-height:40px}
:root.theme-docs .toolbar button,:root.theme-docs .toolbar .dropdown-trigger{min-height:28px;padding-block:3px}
:root.theme-docs .toolbar .divider{height:20px;background:#c7c7c7}
:root.theme-docs .canvas{padding-top:12px}
:root.theme-docs .statusbar{color:var(--muted)}
:root.theme-docs :focus-visible{outline-color:#1a73e8;outline-offset:2px}
:root.theme-docs .topbar .share-button{background:#c2e7ff;border-color:#c2e7ff;color:#001d35;padding-inline:18px}
:root.theme-docs .topbar .read-button{background:transparent;border:1px solid #747775;color:#0b57d0}
:root.theme-docs .topbar .read-button:hover{background:#0b57d014}
:root.theme-docs dialog .dialog-actions button.primary,:root.theme-docs dialog button[type=submit]{background:#0b57d0;border-color:#0b57d0;color:#fff;border-radius:var(--t-pill)}

/* Midnight details */
:root.theme-midnight button.primary,:root.theme-midnight .topbar .read-button{background:linear-gradient(135deg,#3b82f6,#6366f1);border-color:transparent;color:#fff}
:root.theme-midnight .outline-item.active{color:#fff}

/* Typewriter details */
:root.theme-typewriter .menubar{border-bottom:2px solid var(--line)}
:root.theme-typewriter button.primary,:root.theme-typewriter .topbar .read-button,:root.theme-typewriter .topbar .share-button{box-shadow:3px 3px 0 var(--line);border:2px solid var(--line)}
:root.theme-typewriter button.primary:active,:root.theme-typewriter .topbar .read-button:active{box-shadow:none;transform:translate(3px,3px)}
:root.theme-typewriter .editor-page,:root.theme-typewriter .editor-paper:not(.paged-editor){border-radius:0}

/* Number steppers and the sign-in button follow each theme's shape. */
:root.themed .number-stepper{border-radius:var(--t-tool-radius,var(--t-radius));background:var(--surface)}
:root.themed .number-stepper>.step-button:hover:enabled{background:var(--t-hover)}
:root.theme-docs .toolbar .number-stepper{background:transparent;border-color:#747775}
:root.theme-docs .toolbar .number-stepper .dropdown-trigger{min-height:26px}
:root.themed .topbar .sign-in-button{border-radius:var(--t-pill)}
/* motion.css forces the sign-in colours with !important, so the Docs override has to as well. */
:root.theme-docs .topbar .sign-in-button{background:#0b57d0!important;border-color:#0b57d0!important;color:#fff!important}
:root.theme-docs .topbar .sign-in-button:hover{background:#0842a0!important;border-color:#0842a0!important}
/* Themed toolbars sit inside margins; a slightly tighter rhythm keeps every control on one line at laptop widths. */
:root.themed .toolbar{gap:2px}
:root.theme-typewriter .toolbar{font-size:12px}
:root.theme-typewriter .toolbar .dropdown-trigger{gap:6px;padding-inline:6px}
:root.theme-typewriter .toolbar>.number-stepper{width:120px}

/* High contrast keeps its own palette, but the shared theme layer above still reads these colour tokens.
   Without them, popups, menus and dialogs became transparent when a theme and high contrast were both on. */
:root.themed[data-contrast=true]{--t-popup-bg:var(--surface);--t-hover:color-mix(in srgb,var(--ink) 14%,var(--surface));--t-primary-ink:var(--ink);--t-toolbar-bg:var(--surface);--t-page-shadow:0 0 0 1px var(--ink)}
:root.themed[data-contrast=true] .topbar .share-button,:root.themed[data-contrast=true] .topbar .read-button,:root.themed[data-contrast=true] button.primary,:root.themed[data-contrast=true] .sign-in-button{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Flat step controls keep their keyboard focus ring without themed button borders. */
:root.theme-docs .number-stepper>.step-button{border:0;box-shadow:none}
:root.theme-docs .toolbar .number-stepper{border-color:transparent}