/*
 * Design tokens and typography sources for the web UI.
 *
 * Sections:
 * 1) Aptos font registrations, 2) Poppins font registrations,
 * 3) root design tokens grouped by responsibility.
 */

/* Aptos family for body text and dense operational copy. */
@font-face {
  font-family: "Aptos";
  src: url("../font/Aptos.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Poppins family for headings and high-emphasis labels. */
@font-face {
  font-family: "Aptos";
  src: url("../font/Aptos-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos";
  src: url("../font/Aptos-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos";
  src: url("../font/Aptos-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../font/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../font/Poppins-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../font/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../font/Poppins-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Global token registry consumed by all CSS modules. */
/* Shared visual tokens for the Django web UI. */
:root {
  /* Corporate identity tokens from the Axial brand manual. */
  --brand-gray: #575756;
  --brand-light: #f2f2f2;
  --brand-red: #ca3122;

  --bg: var(--brand-light);
  --panel: #ffffff;
  --border: #d7d7d7;
  --text: #202020;
  --muted: #5f5f5e;

  --primary: var(--brand-gray);
  --primary-dark: var(--brand-gray);
  --primary-accent: var(--brand-red);
  --primary-soft: #ececec;
  --green: var(--primary);
  --text-highlight: var(--brand-red);
  --text-selection-bg: var(--brand-red);
  --text-selection: #ffffff;

  --info-soft: #eeeeee;
  --warning-soft: #fff4de;
  --error-soft: #fde6e6;
  --error-text: #8d1f1f;
  --warning-text: #8a5a0a;

  --disabled-bg: #eeeeee;
  --disabled-border: #cccccc;
  --disabled-text: #777777;

  --font-sans: "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Poppins", "Aptos", system-ui, sans-serif;

  --radius-sm: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-soft: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 1.125rem 2.625rem rgba(32, 32, 32, 0.1);
  --shadow-floating-soft: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.05);
  --shadow-hero-card: 0 1.375rem 3.375rem rgba(32, 32, 32, 0.12);

  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.375rem;
  --space-2xl: 1.75rem;
  --space-3xl: 2.5rem;

  --focus-ring: var(--brand-red);
  --surface-hover: #f7f7f7;
  --surface-active: #ececec;
  --surface-elevated: linear-gradient(180deg, #ffffff, #f7f7f7);
  --surface-overlay: rgba(255, 255, 255, 0.94);
  --surface-backdrop: rgba(255, 255, 255, 0.9);
  --surface-hero-card: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
  --surface-soft: var(--primary-soft);
  --surface-canvas: linear-gradient(180deg, #ffffff 0%, var(--brand-light) 100%);
  --surface-panel-tint: linear-gradient(180deg, #ffffff, #f7f7f7);
  --surface-table-frame: linear-gradient(180deg, #ffffff, var(--brand-light));
  --surface-table-head: #e6e6e6;
  --surface-border-soft: color-mix(in srgb, var(--primary) 10%, var(--border) 90%);
  --surface-border-strong: color-mix(in srgb, var(--primary) 18%, var(--border) 82%);
  --surface-inline-bg: var(--panel);
  --surface-inline-border: var(--border);
  --surface-inline-hover: var(--surface-hover);
  --surface-inline-active: var(--surface-active);
  --surface-inline-selected-bg: var(--panel);
  --surface-inline-selected-border: color-mix(in srgb, var(--primary-accent) 45%, var(--border) 55%);
  --surface-inline-selected-text: var(--primary-accent);
  --surface-inline-selected-shadow: 0 0.5rem 1.125rem rgba(202, 49, 34, 0.16);
  --chip-bg: var(--panel);
  --chip-border: var(--border);
  --chip-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.04);
  --chip-remove-hover: var(--surface-hover);
  --chip-remove-active: var(--surface-active);
  --table-row-odd-bg: #ffffff;
  --table-row-even-bg: #f7f7f7;
  --table-row-hover-bg: #f2f2f2;
  --table-resize-indicator: rgba(15, 23, 42, 0.18);
  --table-sticky-shadow-left: 0.625rem 0 1rem rgba(15, 23, 42, 0.06);
  --table-sticky-shadow-right: -0.625rem 0 1rem rgba(15, 23, 42, 0.06);
  --tag-info-bg: var(--primary-soft);
  --tag-info-text: var(--primary-dark);
  --tag-success-bg: color-mix(in srgb, #2e7d32 16%, white 84%);
  --tag-success-text: #256628;

  --btn-text-on-accent: #ffffff;
  --btn-primary-bg: var(--primary-accent);
  --btn-primary-bg-hover: #b22b1f;
  --btn-primary-bg-active: #8f2118;
  --btn-primary-shadow: 0 0.625rem 1.25rem rgba(202, 49, 34, 0.22);

  --btn-secondary-bg: var(--panel);
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-secondary-bg-active: var(--surface-active);
  --btn-secondary-border: var(--border);
  --btn-secondary-text: var(--text);

  --btn-danger-bg: #b91c1c;
  --btn-danger-bg-hover: #991b1b;
  --btn-danger-bg-active: #7f1d1d;

  --btn-file-pdf-bg: #c62828;
  --btn-file-pdf-hover: #a61f1f;
  --btn-file-pdf-active: #8b1b1b;
  --btn-file-excel-bg: #2e7d32;
  --btn-file-excel-hover: #256628;
  --btn-file-excel-active: #1d5320;
  --size-icon-button: 2.75rem;
  --font-size-icon-close: 1.75rem;
  --size-count-pill-min-width: 3.25rem;
  --size-count-pill-min-height: 2.5rem;
  --size-count-pill-inline-min-width: 2.75rem;
  --size-count-pill-inline-min-height: 2.125rem;
  --panel-accent-height: 0.25rem;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}