/* ============================================================
   Ubuntu / Yaru design tokens
   ============================================================ */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/ubuntu-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../assets/fonts/ubuntu-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/ubuntu-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/ubuntu-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/ubuntu-mono-700-latin.woff2') format('woff2');
}

:root {
  /* ---- Brand constants ---------------------------------- */
  --ubuntu-orange: #E95420;
  --ubuntu-orange-dark: #C34113;
  --aubergine: #772953;
  --aubergine-deep: #2C001E;
  --aubergine-mid: #5E2750;
  --yaru-warm-grey: #AEA79F;
  --yaru-cool-grey: #333333;

  /* ---- Typography -------------------------------------- */
  --font-ui: 'Ubuntu', 'Cantarell', 'Inter', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Ubuntu Mono', 'SFMono-Regular', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 44px;
  --lh-tight: 1.2;
  --lh-body: 1.45;

  /* ---- Geometry ---------------------------------------- */
  --panel-h: 37px;
  --dock-icon: 48px;
  --dock-pad: 4px;
  --radius-window: 10px;
  --radius-popover: 14px;
  --radius-menu: 8px;
  --radius-tile: 10px;
  --radius-pill: 999px;

  --ease-shell: cubic-bezier(.22, 1, .36, 1);
  --ease-window: cubic-bezier(.2, .9, .28, 1);
  --ease-snap: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 110ms;
  --dur: 190ms;
  --dur-slow: 340ms;

  --z-window: 100;
  --z-dock: 400;
  --z-panel: 500;
  --z-overview: 600;
  --z-menu: 900;
  --z-dialog: 950;
  --z-notification: 980;
  --z-tooltip: 990;
  --z-session: 1000;
}

/* ---- Accent colours (Ubuntu 24.04 appearance panel) --------- */
:root[data-accent="orange"]    { --accent: #E95420; --accent-fg: #FFFFFF; }
:root[data-accent="aubergine"] { --accent: #762572; --accent-fg: #FFFFFF; }
:root[data-accent="blue"]      { --accent: #1C76C4; --accent-fg: #FFFFFF; }
:root[data-accent="teal"]      { --accent: #03877A; --accent-fg: #FFFFFF; }
:root[data-accent="green"]     { --accent: #2EC27E; --accent-fg: #0E2B1D; }
:root[data-accent="yellow"]    { --accent: #E5A50A; --accent-fg: #3B2A00; }
:root[data-accent="red"]       { --accent: #DA3450; --accent-fg: #FFFFFF; }
:root[data-accent="pink"]      { --accent: #D93D84; --accent-fg: #FFFFFF; }
:root[data-accent="purple"]    { --accent: #8B4FB5; --accent-fg: #FFFFFF; }
:root[data-accent="slate"]     { --accent: #667885; --accent-fg: #FFFFFF; }

/* ---- Light theme (Yaru) ------------------------------------ */
:root[data-theme="light"] {
  --c-window-bg: #F6F5F4;
  --c-view-bg: #FFFFFF;
  --c-sidebar-bg: #F0EEEE;
  --c-headerbar-bg: #F6F5F4;
  --c-headerbar-bg-alt: #FFFFFF;
  --c-card-bg: #FFFFFF;
  --c-fg: #241F31;
  --c-fg-secondary: #5E5C64;
  --c-fg-muted: #77767B;
  --c-fg-disabled: #B4B0B6;
  --c-border: #DCD9D6;
  --c-border-strong: #C4C1BE;
  --c-hover: rgba(0, 0, 0, .055);
  --c-active: rgba(0, 0, 0, .105);
  --c-selected: color-mix(in srgb, var(--accent) 16%, transparent);
  --c-selected-fg: color-mix(in srgb, var(--accent) 70%, #000000);
  --c-scrollbar: rgba(0, 0, 0, .22);
  --c-scrim: rgba(0, 0, 0, .3);
  --c-shell: rgba(30, 30, 30, .62);
  --c-shell-solid: #262626;
  --c-tooltip-bg: #2C2C2C;
  --c-tooltip-fg: #F6F5F4;
  --c-menu-bg: #FFFFFF;
  --c-danger: #C01C28;
  --c-warning: #E5A50A;
  --c-success: #2EC27E;
  --shadow-window: 0 6px 16px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-window-focus: 0 10px 30px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .2);
  --shadow-popover: 0 6px 26px rgba(0, 0, 0, .26), 0 1px 3px rgba(0, 0, 0, .2);
  --window-border: 1px solid rgba(0, 0, 0, .28);
}

/* ---- Dark theme (Yaru) ------------------------------------- */
:root[data-theme="dark"] {
  --c-window-bg: #2B2B2B;
  --c-view-bg: #242424;
  --c-sidebar-bg: #262626;
  --c-headerbar-bg: #303030;
  --c-headerbar-bg-alt: #2B2B2B;
  --c-card-bg: #303030;
  --c-fg: #F6F5F4;
  --c-fg-secondary: #C9C7C5;
  --c-fg-muted: #9A9996;
  --c-fg-disabled: #6E6D6A;
  --c-border: #3D3D3D;
  --c-border-strong: #4E4E4E;
  --c-hover: rgba(255, 255, 255, .07);
  --c-active: rgba(255, 255, 255, .13);
  --c-selected: color-mix(in srgb, var(--accent) 32%, transparent);
  --c-selected-fg: color-mix(in srgb, var(--accent) 55%, #FFFFFF);
  --c-scrollbar: rgba(255, 255, 255, .26);
  --c-scrim: rgba(0, 0, 0, .5);
  --c-shell: rgba(20, 20, 20, .62);
  --c-shell-solid: #1F1F1F;
  --c-tooltip-bg: #3A3A3A;
  --c-tooltip-fg: #F6F5F4;
  --c-menu-bg: #353535;
  --c-danger: #FF6B7E;
  --c-warning: #F5C24A;
  --c-success: #57E08D;
  --shadow-window: 0 6px 16px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-window-focus: 0 10px 34px rgba(0, 0, 0, .62), 0 2px 6px rgba(0, 0, 0, .45);
  --shadow-popover: 0 6px 26px rgba(0, 0, 0, .58), 0 1px 3px rgba(0, 0, 0, .5);
  --window-border: 1px solid rgba(0, 0, 0, .5);
}

/* The top bar stays dark in the standard Yaru variant in both themes */
:root[data-theme="light"] { --c-panel-fg: #F2F1F0; --c-panel-bg: #212121; }
:root[data-theme="dark"]  { --c-panel-fg: #F2F1F0; --c-panel-bg: #1B1B1B; }

/* High contrast accessibility variant */
:root[data-contrast="high"] {
  --c-border: var(--c-fg-secondary);
  --c-border-strong: var(--c-fg);
  --c-fg-secondary: var(--c-fg);
  --c-fg-muted: var(--c-fg);
  --window-border: 2px solid var(--c-fg);
}

/* Text scaling (Accessibility → Larger Text) */
:root { --text-scale: 1; }
:root { font-size: calc(16px * var(--text-scale)); }