/* =====================================================================
   Shared design tokens — Material 3 aligned, tuned for low visual noise
   Import this first, then reference the --md-* custom properties.
   Theme by setting  data-theme="light"  on <html>.
   ===================================================================== */

:root {
    /* ---- Motion (M3 easing + duration) ---- */
    --md-ease-emphasized:       cubic-bezier(0.2, 0, 0, 1);
    --md-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);
    --md-spring:                cubic-bezier(0.34, 1.56, 0.64, 1);
    --md-dur-short: 200ms;
    --md-dur-med:   420ms;
    --md-dur-long:  560ms;

    /* ---- Shape ---- */
    --md-radius-s: 8px;
    --md-radius-m: 12px;
    --md-radius-l: 20px;
    --md-radius-xl: 28px;
    --md-radius-full: 999px;

    /* ---- Type (M3 scale, Roboto) ---- */
    --md-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --md-font-display: "Google Sans Display", "Google Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --md-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    /* ---- Dark scheme (default): neutral surfaces, muted accent ---- */
    --md-surface:        #141218;
    --md-surface-1:      #1d1b21;   /* container */
    --md-surface-2:      #24222a;   /* container-high */
    --md-on-surface:     #e6e1e6;
    --md-on-variant:     #c7c3cc;
    --md-outline:        #8e8a92;
    --md-outline-variant:#45424a;

    /* low-chroma accent (a quiet, desaturated lavender) */
    --md-primary:        #b7b0c9;
    --md-on-primary:     #2a2536;
    --md-primary-fill:   rgba(183, 176, 201, 0.16);
    --md-primary-fill-strong: rgba(183, 176, 201, 0.26);

    /* success (theme-aware on-color) */
    --md-success:    #7fd1a3;
    --md-on-success: #05271a;

    --md-shadow: rgba(0, 0, 0, 0.85);
    --md-dot:    rgba(230, 225, 230, 0.06);   /* dotted canvas */
}

[data-theme="light"] {
    --md-surface:        #faf9fb;
    --md-surface-1:      #f2f0f4;
    --md-surface-2:      #eceaef;
    --md-on-surface:     #1c1b1f;
    --md-on-variant:     #48454c;
    --md-outline:        #78757e;
    --md-outline-variant:#c9c5cf;

    --md-primary:        #5c6072;   /* muted slate-lavender */
    --md-on-primary:     #ffffff;
    --md-primary-fill:   rgba(92, 96, 114, 0.12);
    --md-primary-fill-strong: rgba(92, 96, 114, 0.20);

    --md-success:    #146c43;
    --md-on-success: #ffffff;

    --md-shadow: rgba(60, 55, 70, 0.22);
    --md-dot:    rgba(28, 27, 31, 0.10);   /* dotted canvas */
}

/* ---- Type scale utility classes (optional helpers) ---- */
.md-display  { font-family: var(--md-font); font-size: 2.25rem; font-weight: 400; line-height: 2.75rem; letter-spacing: -0.01em; }
.md-headline { font-family: var(--md-font); font-size: 1.5rem;  font-weight: 400; line-height: 2rem; }
.md-title    { font-family: var(--md-font); font-size: 1rem;    font-weight: 500; line-height: 1.5rem; letter-spacing: 0.01em; }
.md-body     { font-family: var(--md-font); font-size: 0.875rem;font-weight: 400; line-height: 1.35rem; }
.md-label    { font-family: var(--md-font); font-size: 0.6875rem; font-weight: 600; line-height: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }