/* Tada ERP Material 3 foundation This file is intentionally token-first and dependency-free. It maps the Material 3 system roles into CSS custom properties, then exposes stable Tada aliases that legacy pages can adopt one surface at a time. Usage: */ :root { color-scheme: light; /* Material reference palette: brand source colors. */ --md-ref-palette-primary: oklch(0.45 0.12 238); --md-ref-palette-secondary: oklch(0.47 0.06 210); --md-ref-palette-tertiary: oklch(0.52 0.12 145); --md-ref-palette-error: oklch(0.56 0.18 28); --md-ref-palette-warning: oklch(0.70 0.13 78); /* Material system colors: light scheme. */ --md-sys-color-primary: oklch(0.45 0.12 238); --md-sys-color-on-primary: oklch(1 0 0); --md-sys-color-primary-container: oklch(0.91 0.045 238); --md-sys-color-on-primary-container: oklch(0.23 0.08 238); --md-sys-color-secondary: oklch(0.47 0.06 210); --md-sys-color-on-secondary: oklch(1 0 0); --md-sys-color-secondary-container: oklch(0.91 0.032 210); --md-sys-color-on-secondary-container: oklch(0.22 0.04 210); --md-sys-color-tertiary: oklch(0.52 0.12 145); --md-sys-color-on-tertiary: oklch(1 0 0); --md-sys-color-tertiary-container: oklch(0.93 0.055 145); --md-sys-color-on-tertiary-container: oklch(0.24 0.08 145); --md-sys-color-error: oklch(0.56 0.18 28); --md-sys-color-on-error: oklch(1 0 0); --md-sys-color-error-container: oklch(0.94 0.045 28); --md-sys-color-on-error-container: oklch(0.27 0.10 28); --md-sys-color-warning: oklch(0.70 0.13 78); --md-sys-color-on-warning: oklch(0.22 0.06 78); --md-sys-color-warning-container: oklch(0.95 0.05 78); --md-sys-color-on-warning-container: oklch(0.30 0.08 78); --md-sys-color-background: oklch(0.985 0.006 86); --md-sys-color-on-background: oklch(0.20 0.012 250); --md-sys-color-surface: oklch(0.997 0.002 86); --md-sys-color-on-surface: oklch(0.20 0.012 250); --md-sys-color-surface-variant: oklch(0.94 0.010 86); --md-sys-color-on-surface-variant: oklch(0.43 0.012 250); --md-sys-color-outline: oklch(0.67 0.010 250); --md-sys-color-outline-variant: oklch(0.87 0.008 86); /* Typefaces. Thai is first because ERP surfaces are operator-first. */ --md-ref-typeface-brand: "IBM Plex Sans Thai", "Inter Tight", system-ui, sans-serif; --md-ref-typeface-plain: "IBM Plex Sans Thai", "Inter Tight", system-ui, sans-serif; --md-ref-typeface-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Material 3 type scale, reduced to the styles used in ERP operations. */ --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line-height: 16px; /* Shape scale. Keep repeated item cards <= 8px unless a surface needs more. */ --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 6px; --md-sys-shape-corner-medium: 8px; --md-sys-shape-corner-large: 12px; --md-sys-shape-corner-extra-large: 18px; --md-sys-shape-corner-full: 999px; /* Elevation: M3 tonal surfaces first, light shadows second. */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px oklch(0.20 0.012 250 / 0.06); --md-sys-elevation-level2: 0 2px 8px oklch(0.20 0.012 250 / 0.08); --md-sys-elevation-level3: 0 8px 24px oklch(0.20 0.012 250 / 0.10); /* Tada stable aliases for legacy pages. */ --tada-color-bg: var(--md-sys-color-background); --tada-color-surface: var(--md-sys-color-surface); --tada-color-surface-muted: var(--md-sys-color-surface-variant); --tada-color-text: var(--md-sys-color-on-surface); --tada-color-text-muted: var(--md-sys-color-on-surface-variant); --tada-color-line: var(--md-sys-color-outline-variant); --tada-color-focus: var(--md-sys-color-primary); --tada-color-action: var(--md-sys-color-primary); --tada-color-success: var(--md-sys-color-tertiary); --tada-color-warning: var(--md-sys-color-warning); --tada-color-danger: var(--md-sys-color-error); --tada-font-sans: var(--md-ref-typeface-plain); --tada-font-mono: var(--md-ref-typeface-mono); --tada-radius-control: var(--md-sys-shape-corner-medium); --tada-radius-card: var(--md-sys-shape-corner-medium); --tada-shadow-raised: var(--md-sys-elevation-level1); } [data-theme="dark"] { color-scheme: dark; --md-sys-color-primary: oklch(0.76 0.09 238); --md-sys-color-on-primary: oklch(0.18 0.06 238); --md-sys-color-primary-container: oklch(0.31 0.09 238); --md-sys-color-on-primary-container: oklch(0.91 0.045 238); --md-sys-color-secondary: oklch(0.74 0.045 210); --md-sys-color-on-secondary: oklch(0.18 0.04 210); --md-sys-color-secondary-container: oklch(0.32 0.045 210); --md-sys-color-on-secondary-container: oklch(0.90 0.032 210); --md-sys-color-tertiary: oklch(0.78 0.10 145); --md-sys-color-on-tertiary: oklch(0.18 0.06 145); --md-sys-color-tertiary-container: oklch(0.34 0.08 145); --md-sys-color-on-tertiary-container: oklch(0.91 0.055 145); --md-sys-color-error: oklch(0.78 0.12 28); --md-sys-color-on-error: oklch(0.20 0.08 28); --md-sys-color-error-container: oklch(0.35 0.10 28); --md-sys-color-on-error-container: oklch(0.92 0.045 28); --md-sys-color-background: oklch(0.18 0.012 250); --md-sys-color-on-background: oklch(0.93 0.006 86); --md-sys-color-surface: oklch(0.21 0.012 250); --md-sys-color-on-surface: oklch(0.93 0.006 86); --md-sys-color-surface-variant: oklch(0.28 0.012 250); --md-sys-color-on-surface-variant: oklch(0.78 0.008 86); --md-sys-color-outline: oklch(0.62 0.010 250); --md-sys-color-outline-variant: oklch(0.38 0.012 250); } [data-material3="true"] { background: var(--tada-color-bg); color: var(--tada-color-text); font-family: var(--tada-font-sans); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); } [data-material3="true"] button, [data-material3="true"] input, [data-material3="true"] select, [data-material3="true"] textarea { font: inherit; } .m3-type-title-large { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); font-weight: 700; } .m3-type-title-medium { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); font-weight: 600; } .m3-type-body-medium { font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); } .m3-type-label-small { font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); font-weight: 700; text-transform: uppercase; } .m3-surface { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-level1); color: var(--md-sys-color-on-surface); } .m3-button { align-items: center; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); cursor: pointer; display: inline-flex; font-weight: 700; gap: 8px; justify-content: center; min-height: 40px; padding: 0 18px; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease; } .m3-button:active { transform: translateY(1px); } .m3-button-filled { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .m3-button-tonal { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .m3-button-outlined { background: var(--md-sys-color-surface); color: var(--md-sys-color-primary); } .m3-field { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); color: var(--md-sys-color-on-surface); min-height: 40px; padding: 9px 12px; } .m3-field:focus, .m3-button:focus-visible { outline: 3px solid color-mix(in oklch, var(--md-sys-color-primary), transparent 78%); outline-offset: 2px; } .m3-chip { align-items: center; background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); color: var(--md-sys-color-on-surface-variant); display: inline-flex; font-size: var(--md-sys-typescale-label-large-size); font-weight: 700; gap: 6px; min-height: 32px; padding: 0 12px; }