/* ============================================================ * k2c-ai Design System — Mono Editorial * Minimal, typographic, monochrome with a single accent. * Light & dark via prefers-color-scheme. * ============================================================ */ :root { /* --- Palette: Light --- */ --bg: #ffffff; --bg-soft: #f7f7f5; --bg-elev: #ffffff; --ink: #111111; --ink-soft: #2b2b2b; --ink-mute: #6b6b6b; --ink-faint: #a0a0a0; --rule: #111111; --rule-soft: #e6e6e1; --accent: #ff4500; --accent-ink: #ffffff; --danger: #c0291c; --selection: #111111; --selection-ink: #ffffff; /* Legacy aliases (so existing component CSS keeps working) */ --color-primary: var(--accent); --color-primary-dark: #cc3700; --color-secondary: var(--ink-soft); --color-success: #1f7a3a; --color-danger: var(--danger); --color-warning: #c87800; --color-info: var(--ink-soft); --color-light: var(--bg-soft); --color-dark: var(--ink); --color-text: var(--ink); --color-text-muted: var(--ink-mute); --color-background: var(--bg); --color-border: var(--rule-soft); /* --- Typography --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", "Georgia", "Times New Roman", serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-family-sans-serif: var(--font-sans); --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 3rem; --fs-4xl: 4.5rem; --font-size-base: 16px; --font-size-lg: var(--fs-lg); --font-size-sm: var(--fs-sm); --font-weight-normal: 400; --font-weight-bold: 600; --line-height-base: 1.55; --tracking-tight: -0.02em; --tracking-wide: 0.18em; /* --- Spacing (8pt-ish) --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6rem; --spacing-1: var(--s-1); --spacing-2: var(--s-2); --spacing-3: var(--s-3); --spacing-4: var(--s-4); --spacing-5: var(--s-5); /* --- Geometry --- */ --rule-width: 1px; --rule-width-bold: 2px; --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --border-width: var(--rule-width); --border-radius: var(--radius-2); --border-radius-sm: var(--radius-1); --border-radius-lg: var(--radius-2); /* --- Shadows (intentionally absent — editorial uses rules, not shadows) --- */ --shadow-sm: none; --shadow: none; --shadow-lg: none; /* --- Motion --- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; } @media (prefers-color-scheme: dark) { :root { --bg: #0e0e0e; --bg-soft: #161616; --bg-elev: #1a1a1a; --ink: #f5f5f2; --ink-soft: #e2e2dd; --ink-mute: #9a9a92; --ink-faint: #6b6b63; --rule: #f5f5f2; --rule-soft: #2a2a28; --accent: #ff5a1f; --accent-ink: #0e0e0e; --danger: #ff6058; --selection: #f5f5f2; --selection-ink: #0e0e0e; } } /* ============================================================ * k2c theme — "MOMENTUM" — non-admin surfaces only * Scoped to , so admin screens (which * carry no data-theme) keep the original tokens untouched. * Bold, confident, growth-minded SaaS for sales-call analytics: * azure→indigo brand gradient, generous radii, soft elevation, * heavy Montserrat display, colored status badges & trend chips. * Light-first. * ============================================================ */ html[data-theme="k2c"] { /* --- Palette --- */ --bg: #ffffff; --bg-soft: #f7f8fb; --bg-elev: #ffffff; --bg-tint: #eef2ff; --ink: #0f172a; --ink-soft: #334155; --ink-mute: #64748b; --ink-faint: #94a3b8; --rule: #cbd5e1; --rule-soft: #e8ecf3; --accent: #0081f2; --accent-strong: #4f46e5; --accent-ink: #ffffff; --accent-soft: #e8f1fe; --grad-brand: linear-gradient(135deg, #0081f2 0%, #4f46e5 100%); /* Semantic */ --positive: #16a34a; --positive-soft: #dcfce7; --negative: #fb7185; --negative-soft: #ffe4e6; --amber: #f59e0b; --amber-soft: #fef3c7; --danger: #ef4444; --info-soft: var(--accent-soft); --selection: #4f46e5; --selection-ink: #ffffff; /* Legacy aliases retuned */ --color-primary-dark: var(--accent-strong); --color-success: var(--positive); --color-warning: var(--amber); --color-info: var(--accent); /* --- Typography (bold sans display, no serif) --- */ --font-sans: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif; --font-serif: "Montserrat", "Noto Sans JP", sans-serif; /* display = heavy sans */ --font-family-sans-serif: var(--font-sans); --line-height-base: 1.65; --tracking-wide: 0.04em; /* --- Geometry & elevation (momentum brings back rounding + shadow) --- */ --radius-1: 8px; --radius-2: 14px; --radius-pill: 999px; --border-radius: var(--radius-2); --border-radius-sm: var(--radius-1); --border-radius-lg: var(--radius-2); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12); } /* --- Base element refinements (off :root so admin is unaffected) --- */ html[data-theme="k2c"] body { font-weight: 400; } html[data-theme="k2c"] h1, html[data-theme="k2c"] h2, html[data-theme="k2c"] h3, html[data-theme="k2c"] h4, html[data-theme="k2c"] h5, html[data-theme="k2c"] h6 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } html[data-theme="k2c"] h3, html[data-theme="k2c"] h4 { font-weight: 700; } html[data-theme="k2c"] p { color: var(--ink-soft); } /* Links: solid accent, no editorial underline-grow */ html[data-theme="k2c"] a { color: var(--accent); background-image: none; } html[data-theme="k2c"] a:hover { color: var(--accent-strong); background-image: none; } /* ---- Buttons: pill, gradient primary, lift on hover ---- */ html[data-theme="k2c"] .btn { text-transform: none; letter-spacing: 0.01em; font-weight: 600; border-radius: var(--radius-pill); border: 1px solid var(--rule); padding: 0.8rem 1.5rem; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } html[data-theme="k2c"] .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); background-color: var(--bg-soft); color: var(--ink); border-color: var(--rule); } html[data-theme="k2c"] .btn-primary, html[data-theme="k2c"] .btn.btn-primary { background: var(--grad-brand); border-color: transparent; color: var(--accent-ink); } html[data-theme="k2c"] .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); background: var(--grad-brand); color: var(--accent-ink); filter: saturate(1.08) brightness(1.03); } html[data-theme="k2c"] .btn-secondary { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; } html[data-theme="k2c"] .btn-secondary:hover { background: var(--bg-tint); color: var(--accent-strong); } html[data-theme="k2c"] .btn-outline-primary { color: var(--accent); background: transparent; border-color: var(--accent); } html[data-theme="k2c"] .btn-outline-primary:hover { color: var(--accent-ink); background: var(--accent); } /* Auth/submit buttons (login, register, reset…) → gradient CTA */ html[data-theme="k2c"] .btn-submit { background: var(--grad-brand); border-color: transparent; color: var(--accent-ink); border-radius: var(--radius-pill); } html[data-theme="k2c"] .btn-submit:hover { background: var(--grad-brand); color: var(--accent-ink); border-color: transparent; transform: translateY(-1px); box-shadow: var(--shadow-lg); filter: brightness(1.04); } /* ---- Cards: rounded, soft elevation, hover float ---- */ html[data-theme="k2c"] .card { border: 1px solid var(--rule-soft); border-radius: var(--radius-2); box-shadow: var(--shadow-sm); background: var(--bg-elev); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } html[data-theme="k2c"] .card:hover { box-shadow: var(--shadow); } /* ---- Form controls: rounded filled boxes with focus ring ---- */ html[data-theme="k2c"] .form-label { text-transform: none; letter-spacing: 0.01em; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); } html[data-theme="k2c"] .form-control, html[data-theme="k2c"] input[type="text"], html[data-theme="k2c"] input[type="email"], html[data-theme="k2c"] input[type="password"], html[data-theme="k2c"] input[type="search"], html[data-theme="k2c"] select, html[data-theme="k2c"] textarea { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius-1); box-shadow: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); } html[data-theme="k2c"] .form-control:focus, html[data-theme="k2c"] input:focus, html[data-theme="k2c"] select:focus, html[data-theme="k2c"] textarea:focus { outline: 0; background: var(--bg-elev); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 129, 242, 0.15); } html[data-theme="k2c"] textarea.form-control { border: 1px solid var(--rule-soft); } /* ---- Status badge (sales pipeline states) ---- */ html[data-theme="k2c"] .badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--bg-soft); color: var(--ink-soft); } html[data-theme="k2c"] .badge::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; flex-shrink: 0; } html[data-theme="k2c"] .badge--completed { background: var(--positive-soft); color: #15803d; } html[data-theme="k2c"] .badge--transcribing, html[data-theme="k2c"] .badge--generating { background: var(--accent-soft); color: var(--accent-strong); } html[data-theme="k2c"] .badge--uploading, html[data-theme="k2c"] .badge--pending { background: var(--amber-soft); color: #b45309; } html[data-theme="k2c"] .badge--error { background: var(--negative-soft); color: #be123c; } /* Animate in-progress states */ html[data-theme="k2c"] .badge--transcribing::before, html[data-theme="k2c"] .badge--generating::before, html[data-theme="k2c"] .badge--uploading::before { animation: k2c-pulse 1.2s var(--ease) infinite; } @keyframes k2c-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---- Trend chip (reusable for numeric deltas) ---- */ html[data-theme="k2c"] .trend { display: inline-flex; align-items: center; gap: 0.25em; font-weight: 700; font-size: var(--fs-sm); } html[data-theme="k2c"] .trend.up { color: var(--positive); } html[data-theme="k2c"] .trend.down { color: var(--negative); } html[data-theme="k2c"] .trend.up::before { content: "▲"; font-size: 0.8em; } html[data-theme="k2c"] .trend.down::before { content: "▼"; font-size: 0.8em; } /* ---- Footer / micro labels ---- */ html[data-theme="k2c"] .user-welcome, html[data-theme="k2c"] footer, html[data-theme="k2c"] .footer { text-transform: none; letter-spacing: 0.02em; } html[data-theme="k2c"] footer, html[data-theme="k2c"] .footer { background: var(--bg-soft); border-top: 1px solid var(--rule-soft); } /* ============================================================ * MOMENTUM — dashboard list / table surfaces * Shared `.user-list-wrapper` markup used by company list pages * and the audio-upload form. One scoped override upgrades them * all to rounded cards, soft tables, and pill CTAs. * ============================================================ */ html[data-theme="k2c"] .user-list-wrapper { background: var(--bg-soft); padding: var(--s-4); } html[data-theme="k2c"] .user-list-wrapper .user-list { border: 1px solid var(--rule-soft); border-radius: var(--radius-2); box-shadow: var(--shadow-sm); background: var(--bg-elev); padding: var(--s-5); max-width: 76rem; } html[data-theme="k2c"] .user-list-wrapper .user-list h1 { font-weight: 800; letter-spacing: -0.02em; } html[data-theme="k2c"] .user-list-wrapper .user-list .list h2 { text-transform: none; letter-spacing: 0.02em; font-size: var(--fs-sm); color: var(--ink-mute); } html[data-theme="k2c"] .user-list-wrapper .user-list .list .table { border: 1px solid var(--rule-soft); border-radius: var(--radius-2); overflow: hidden; overflow-x: auto; } html[data-theme="k2c"] .user-list-wrapper .user-list .list .table table thead { background: var(--bg-soft); border-bottom: 1px solid var(--rule-soft); } html[data-theme="k2c"] .user-list-wrapper .user-list .list .table table thead tr th { text-transform: none; letter-spacing: 0.02em; color: var(--ink-mute); font-weight: 700; font-size: var(--fs-xs); } html[data-theme="k2c"] .user-list-wrapper .user-list .list .table table tbody tr td { font-family: var(--font-sans); color: var(--ink-soft); font-size: var(--fs-sm); } /* List action buttons → pills; "add" button becomes the gradient CTA */ html[data-theme="k2c"] .user-list-wrapper .user-list .open-add-user-modal-button button, html[data-theme="k2c"] .user-list-wrapper .user-list .list .table table tbody tr td button { text-transform: none; letter-spacing: 0.01em; border-radius: var(--radius-pill); font-weight: 600; } html[data-theme="k2c"] .user-list-wrapper .user-list .open-add-user-modal-button button { background: var(--grad-brand); border-color: transparent; color: var(--accent-ink); box-shadow: var(--shadow-sm); } html[data-theme="k2c"] .user-list-wrapper .user-list .open-add-user-modal-button button:hover { background: var(--grad-brand); color: var(--accent-ink); filter: brightness(1.05); transform: translateY(-1px); } /* ============================================================ * Reset / base * ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-color: var(--bg); } body { min-height: 100vh; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base); line-height: var(--line-height-base); color: var(--ink); background-color: var(--bg); font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--selection); color: var(--selection-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--ink); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { color: var(--ink-soft); } a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; transition: color var(--dur-1) var(--ease), background-size var(--dur-2) var(--ease); } a:hover { color: var(--accent); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; opacity: 1; } ul, ol { list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; } hr { border: 0; border-top: var(--rule-width) solid var(--rule-soft); margin: var(--s-4) 0; } input, button, textarea, select { font: inherit; color: inherit; } /* ============================================================ * Layout primitives * ============================================================ */ main { display: block; min-height: 80vh; } .flex-container { display: flex; justify-content: flex-start; align-items: stretch; } .flex-grow { flex-grow: 1; } /* ============================================================ * Card — editorial frame, no shadow * ============================================================ */ .card { background-color: var(--bg-elev); border: var(--rule-width) solid var(--rule-soft); border-radius: var(--radius-2); padding: var(--s-5); } /* ============================================================ * Forms * ============================================================ */ .form-group { margin-bottom: var(--s-4); } .form-label { display: inline-block; margin-bottom: var(--s-2); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-mute); } .form-control { display: block; width: 100%; padding: 0.75rem 0; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 400; line-height: var(--line-height-base); color: var(--ink); background-color: transparent; background-clip: padding-box; border: 0; border-bottom: var(--rule-width) solid var(--rule); border-radius: 0; transition: border-color var(--dur-2) var(--ease); } .form-control::placeholder { color: var(--ink-faint); } .form-control:focus { outline: 0; border-bottom-width: var(--rule-width-bold); border-bottom-color: var(--accent); } .form-control:disabled { color: var(--ink-faint); border-bottom-style: dashed; } textarea.form-control { min-height: 140px; resize: vertical; border: var(--rule-width) solid var(--rule); padding: var(--s-3); } textarea.form-control:focus { border-color: var(--accent); border-width: var(--rule-width-bold); } .error-message { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--s-2); letter-spacing: 0.01em; } /* ============================================================ * Buttons — outlined editorial chip with arrow affordance * ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1; color: var(--ink); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: var(--rule-width) solid var(--ink); padding: 0.95rem 1.5rem; border-radius: var(--radius-1); transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .btn:hover { background-color: var(--ink); color: var(--bg); border-color: var(--ink); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active { transform: translateY(1px); } /* Primary = the accent, used sparingly */ .btn-primary, .btn.btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background-color: var(--ink); border-color: var(--ink); color: var(--bg); } .btn-secondary { background-color: transparent; color: var(--ink-mute); border-color: var(--rule-soft); } .btn-secondary:hover { background-color: var(--bg-soft); border-color: var(--ink); color: var(--ink); } .btn-outline-primary { color: var(--accent); background-color: transparent; border-color: var(--accent); } .btn-outline-primary:hover { color: var(--accent-ink); background-color: var(--accent); border-color: var(--accent); } .btn-lg { padding: 1.15rem 2rem; font-size: var(--fs-base); } .btn-sm { padding: 0.625rem 1rem; font-size: var(--fs-xs); } /* ============================================================ * Header / footer chrome * ============================================================ */ .user-welcome { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } footer, .footer { text-align: center; padding: var(--s-5) var(--s-4); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-mute); border-top: var(--rule-width) solid var(--rule-soft); background-color: var(--bg); }