/*
  =========================================================
  ACROV CONTROL

  FILE:
  core/acrov-core.css

  SYSTEM:
  ACROV CORE VISUAL FOUNDATION

  PURPOSE:
  - Establishes global ACROV design tokens
  - Provides application-wide reset rules
  - Establishes typography and sizing
  - Provides shared colors and surfaces
  - Provides consistent focus behavior
  - Provides reusable foundational utilities

  ARCHITECTURE:

  ACROV CORE
       ↓
  SHELL
       ↓
  HEADER / NAVIGATION
       ↓
  DASHBOARD HOST
       ↓
  MASTER / DIRECTOR ENVIRONMENTS

  DOES NOT CONTROL:
  - Shell geometry
  - Header geometry
  - Navigation geometry
  - Dashboard rendering
  - Director-specific layouts
  - Permissions
  - Authentication
  =========================================================
*/


/* =========================================================
   ACROV DESIGN TOKENS
========================================================= */

:root {

  /* -------------------------------------------------------
     CORPORATE
  -------------------------------------------------------- */

  --acrov-blue:
    #2563eb;

  --acrov-blue-hover:
    #1d4ed8;

  --acrov-blue-dark:
    #1e40af;

  --acrov-blue-soft:
    #eff6ff;

  --acrov-blue-surface:
    #dbeafe;


  /* -------------------------------------------------------
     BASE SURFACES
  -------------------------------------------------------- */

  --acrov-white:
    #ffffff;

  --acrov-background:
    #f4f7fb;

  --acrov-surface:
    #ffffff;

  --acrov-surface-soft:
    #f8fafc;

  --acrov-surface-muted:
    #f1f5f9;

  --acrov-surface-strong:
    #e2e8f0;


  /* -------------------------------------------------------
     TEXT
  -------------------------------------------------------- */

  --acrov-text:
    #0f172a;

  --acrov-text-secondary:
    #334155;

  --acrov-text-muted:
    #64748b;

  --acrov-text-soft:
    #94a3b8;

  --acrov-text-inverse:
    #ffffff;


  /* -------------------------------------------------------
     BORDERS
  -------------------------------------------------------- */

  --acrov-border:
    #e2e8f0;

  --acrov-border-strong:
    #cbd5e1;

  --acrov-border-dark:
    #94a3b8;


  /* -------------------------------------------------------
     STATUS
  -------------------------------------------------------- */

  --acrov-success:
    #15803d;

  --acrov-success-soft:
    #f0fdf4;

  --acrov-warning:
    #b45309;

  --acrov-warning-soft:
    #fffbeb;

  --acrov-danger:
    #b91c1c;

  --acrov-danger-soft:
    #fef2f2;

  --acrov-info:
    #0369a1;

  --acrov-info-soft:
    #f0f9ff;


  /* -------------------------------------------------------
     TYPOGRAPHY
  -------------------------------------------------------- */

  --acrov-font:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;


  /* -------------------------------------------------------
     RADIUS
  -------------------------------------------------------- */

  --acrov-radius-small:
    5px;

  --acrov-radius:
    8px;

  --acrov-radius-large:
    12px;

  --acrov-radius-pill:
    999px;


  /* -------------------------------------------------------
     SHADOWS
  -------------------------------------------------------- */

  --acrov-shadow-small:
    0 1px 2px
    rgba(
      15,
      23,
      42,
      0.05
    );

  --acrov-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.07
    );

  --acrov-shadow-large:
    0 14px 36px
    rgba(
      15,
      23,
      42,
      0.10
    );


  /* -------------------------------------------------------
     TRANSITIONS
  -------------------------------------------------------- */

  --acrov-transition-fast:
    120ms ease;

  --acrov-transition:
    180ms ease;


  /* -------------------------------------------------------
     LAYERS
  -------------------------------------------------------- */

  --acrov-layer-base:
    1;

  --acrov-layer-navigation:
    20;

  --acrov-layer-header:
    30;

  --acrov-layer-overlay:
    100;

  --acrov-layer-modal:
    200;

}


/* =========================================================
   BOX MODEL
========================================================= */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


/* =========================================================
   DOCUMENT
========================================================= */

html {

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  background:
    var(--acrov-background);

  font-family:
    var(--acrov-font);

  -webkit-text-size-adjust:
    100%;

  text-size-adjust:
    100%;

}


/* =========================================================
   BODY
========================================================= */

body {

  width:
    100%;

  min-width:
    320px;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

  background:
    var(--acrov-background);

  color:
    var(--acrov-text);

  font-family:
    var(--acrov-font);

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.5;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

}


/* =========================================================
   ROOT APPLICATION
========================================================= */

#acrov-control,
[data-acrov-control] {

  width:
    100%;

  height:
    100%;

}


/* =========================================================
   TYPOGRAPHY RESET
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {

  margin:
    0;

  padding:
    0;

}


h1,
h2,
h3,
h4,
h5,
h6 {

  color:
    var(--acrov-text);

  font-family:
    inherit;

  font-weight:
    700;

}


p {

  color:
    var(--acrov-text-secondary);

}


/* =========================================================
   LINKS
========================================================= */

a {

  color:
    inherit;

  text-decoration:
    none;

}


/* =========================================================
   BUTTON RESET
========================================================= */

button {

  margin:
    0;

  font:
    inherit;

}


button:not(:disabled) {

  cursor:
    pointer;

}


button:disabled {

  cursor:
    not-allowed;

  opacity:
    0.55;

}


/* =========================================================
   FORM CONTROLS
========================================================= */

input,
select,
textarea,
button {

  font-family:
    inherit;

}


input,
select,
textarea {

  color:
    var(--acrov-text);

}


/* =========================================================
   MEDIA
========================================================= */

img,
svg,
video,
canvas {

  display:
    block;

  max-width:
    100%;

}


/* =========================================================
   TABLES
========================================================= */

table {

  border-collapse:
    collapse;

  border-spacing:
    0;

}


/* =========================================================
   FOCUS
========================================================= */

:focus {

  outline:
    none;

}


:focus-visible {

  outline:
    2px solid
    var(--acrov-blue);

  outline-offset:
    2px;

}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {

  background:
    var(--acrov-blue-surface);

  color:
    var(--acrov-text);

}


/* =========================================================
   SHARED ACROV SURFACE
========================================================= */

.acrov-surface {

  width:
    100%;

  min-width:
    0;

  background:
    var(--acrov-surface);

  border:
    1px solid
    var(--acrov-border);

  border-radius:
    var(--acrov-radius);

  box-shadow:
    var(--acrov-shadow-small);

}


/* =========================================================
   SHARED SECTION
========================================================= */

.acrov-section {

  width:
    100%;

  min-width:
    0;

}


/* =========================================================
   SHARED PAGE HEADING
========================================================= */

.acrov-page-heading {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.acrov-page-title {

  color:
    var(--acrov-text);

  font-size:
    26px;

  font-weight:
    750;

  line-height:
    1.15;

  letter-spacing:
    -0.6px;

}


.acrov-page-description {

  max-width:
    780px;

  color:
    var(--acrov-text-muted);

  font-size:
    13px;

  line-height:
    1.55;

}


/* =========================================================
   SHARED STATUS BADGE
========================================================= */

.acrov-status {

  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 9px;

  border:
    1px solid
    var(--acrov-border);

  border-radius:
    var(--acrov-radius-pill);

  background:
    var(--acrov-surface-soft);

  color:
    var(--acrov-text-secondary);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;

}


/* =========================================================
   STATUS — ACTIVE
========================================================= */

.acrov-status[data-status="active"] {

  border-color:
    #bbf7d0;

  background:
    var(--acrov-success-soft);

  color:
    var(--acrov-success);

}


/* =========================================================
   STATUS — WARNING
========================================================= */

.acrov-status[data-status="warning"] {

  border-color:
    #fde68a;

  background:
    var(--acrov-warning-soft);

  color:
    var(--acrov-warning);

}


/* =========================================================
   STATUS — DANGER
========================================================= */

.acrov-status[data-status="danger"] {

  border-color:
    #fecaca;

  background:
    var(--acrov-danger-soft);

  color:
    var(--acrov-danger);

}


/* =========================================================
   STATUS — INFO
========================================================= */

.acrov-status[data-status="info"] {

  border-color:
    #bae6fd;

  background:
    var(--acrov-info-soft);

  color:
    var(--acrov-info);

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.acrov-visually-hidden {

  width:
    1px !important;

  height:
    1px !important;

  position:
    absolute !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  clip-path:
    inset(
      50%
    ) !important;

  white-space:
    nowrap !important;

}


/* =========================================================
   HIDDEN
========================================================= */

[hidden] {

  display:
    none !important;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

  }

}


/* =========================================================
   SMALL SCREEN TYPOGRAPHY
========================================================= */

@media (
  max-width: 600px
) {

  body {

    font-size:
      13px;

  }


  .acrov-page-title {

    font-size:
      22px;

  }


  .acrov-page-description {

    font-size:
      12px;

  }

}