@layer ag.compat, ag.reset, ag.tokens, ag.material, ag.components, ag.a11y;
@import './tokens.css';

@theme inline {
  --color-accent: var(--ag-color-accent);
  --color-border: var(--ag-color-border);
  --color-canvas: var(--ag-color-canvas);
  --color-danger: var(--ag-color-danger);
  --color-focus-inner: var(--ag-focus-inner);
  --color-focus-outer: var(--ag-focus-outer);
  --color-info: var(--ag-color-info);
  --color-on-accent: var(--ag-color-on-accent);
  --color-on-surface: var(--ag-on-surface);
  --color-on-surface-muted: var(--ag-on-surface-muted);
  --color-specular: var(--ag-color-specular);
  --color-success: var(--ag-color-success);
  --color-warning: var(--ag-color-warning);
  --color-scrim-media: var(--ag-scrim-media);
  --radius-full: var(--ag-radius-full);
  --radius-lg: var(--ag-radius-lg);
  --radius-md: var(--ag-radius-md);
  --radius-sm: var(--ag-radius-sm);
  --radius-xl: var(--ag-radius-xl);
  --radius-xs: var(--ag-radius-xs);
  --radius-inner: var(--ag-radius-inner);
  --radius-outer: var(--ag-radius-outer);
  --shadow-regular: var(--ag-shadow-regular);
  --shadow-thick: var(--ag-shadow-thick);
  --shadow-thin: var(--ag-shadow-thin);
  --color-surface-fill: var(--ag-surface-fill);
  --radius-surface: var(--ag-surface-radius);
  --color-surface-rim: var(--ag-surface-rim);
  --shadow-glass: var(--ag-surface-shadow);
}

/* glass-* utilities mirror the MAT material surfaces: fill/rim/shadow come from
   the public material vars, the backdrop blur ladder follows the standard tier
   (thin 12px, regular 20px, thick 32px). No self-@apply. */
@utility glass-regular {
    --_ag-blur: 20px;
    --_ag-saturation: 1.6;
    --_ag-brightness: 1;
    --_ag-grain-opacity: 0.03;
    --_ag-rim-width: 1px;
    --_ag-shadow: var(--ag-shadow-regular);
    --_ag-tint-alpha: 0.72;
  background: var(--ag-surface-fill, oklch(0.99 0.004 250 / 0.85));
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  box-shadow: var(--ag-shadow-regular, 0 4px 16px oklch(0 0 0 / 0.14));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
@utility glass-clear {
    --_ag-blur: 20px;
    --_ag-saturation: 1.6;
    --_ag-brightness: 1;
    --_ag-grain-opacity: 0.02;
    --_ag-rim-width: 1px;
    --_ag-shadow: var(--ag-shadow-regular);
    --_ag-tint-alpha: 0.55;
  background: transparent;
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
@utility glass-thin {
    --_ag-blur: 12px;
    --_ag-saturation: 1.6;
    --_ag-brightness: 1;
    --_ag-grain-opacity: 0.03;
    --_ag-rim-width: 1px;
    --_ag-shadow: var(--ag-shadow-thin);
    --_ag-tint-alpha: 0.72;
  background: var(--ag-surface-fill, oklch(0.99 0.004 250 / 0.85));
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  box-shadow: var(--ag-shadow-thin, 0 1px 4px oklch(0 0 0 / 0.1));
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
}
@utility glass-thick {
    --_ag-blur: 32px;
    --_ag-saturation: 1.6;
    --_ag-brightness: 1;
    --_ag-grain-opacity: 0.03;
    --_ag-rim-width: 1.5px;
    --_ag-shadow: var(--ag-shadow-thick);
    --_ag-tint-alpha: 0.72;
  background: var(--ag-surface-fill, oklch(0.99 0.004 250 / 0.85));
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  box-shadow: var(--ag-shadow-thick, 0 8px 32px oklch(0 0 0 / 0.2));
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  backdrop-filter: blur(32px) saturate(1.6);
}
@utility content-raised {
  --_ag-tint-alpha: 0.8;
  background: var(--ag-surface-fill, oklch(0.99 0.004 250 / 0.8));
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  box-shadow: var(--ag-shadow-regular, 0 4px 16px oklch(0 0 0 / 0.14));
}

@utility content-sunken {
  --_ag-tint-alpha: 0.64;
  background: var(--ag-surface-fill, oklch(0.99 0.004 250 / 0.8));
  border: 1px solid var(--ag-surface-rim, oklch(1 0 0 / 0.18));
  border-radius: var(--ag-surface-radius, var(--ag-radius-md));
  box-shadow: inset 0 1px 0 var(--ag-surface-rim, oklch(0 0 0 / 0.12));
}

@custom-variant ag-contrast-more (&:where([data-ag-contrast=more], [data-ag-contrast=more] *));
@custom-variant ag-dark (&:where([data-ag-scheme=dark], [data-ag-scheme=dark] *));
@custom-variant ag-tinted (&:where([data-ag-transparency=tinted], [data-ag-transparency=tinted] *, [data-tinted], [data-tinted] *));
@custom-variant ag-solid (&:where([data-ag-transparency='solid'], [data-ag-transparency='solid'] *));