/* ============================================================
   Design tokens required by the AI Assistant stylesheets
   (RAG_Response_View.css, Reference_Cards.css, Right_Rail_Cards.css)

   Structure copied from gen2-mediasite-dev /Content/CSSContent,
   values mapped to the AAD OG token palette:
     --c-bg          <- --base-02        --c-primary       <- --primary
     --c-surface     <- --base-01        --c-primary-hover <- --primary-focus
     --c-surface-2   <- --base-03        --c-on-primary    <- --primary-content
     --c-text        <- --base-content   --c-danger        <- --error
     --c-text-strong <- --base-emphasis  --c-warning       <- --warning
     --c-text-muted  <- --base-mute      --c-success       <- --success
     --c-border      <- --border-color   --c-info          <- --info
     type scale      <- OG modular scale (0.79 / 0.889 / 1.125 ...)
     fonts           <- --paragraph-font (Open Sans stack)
     motion          <- --three (0.3s ease-in-out)

   Append this to the AAD site's custom CSS (Content > CSSContent).
   ============================================================ */

:root {
  --font-sans: "Open Sans", Arial, Helvetica, Tahoma, Verdana, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Type scale — OG modular scale */
  --text-xs: 0.79rem;
  --text-sm: 0.889rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.266rem;
  --text-2xl: 1.424rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.7;
  --weight-regular: 400; /* OG font-weight: normal */
  --weight-medium: 600;
  --weight-bold: 700;
  --h1: 2.281rem; /* OG --text-6xl */
  --h2: 1.424rem;
  --h3: 1.266rem;
  --h4: 1.125rem;
  --h5: 1rem;
  --h6: 0.889rem;
  --p: 1rem;
  --p-sm: 0.889rem;
  --measure: 70ch;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius / borders / shadows */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --border-1: 1px solid var(--border);
  --border-2: 2px solid var(--border);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  /* Motion — OG --three: all 0.3s ease-in-out */
  --ease-standard: ease-in-out;
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 300ms;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 1rem;
  --control-h: 2.5rem;
  --control-pad-x: 0.875rem;
  --control-pad-y: 0.625rem;
  --sidebar-w: 320px;
  --left-w: 260px;
  --right-w: 320px;
  --drawer-w: 360px;
  --menu-gap: var(--space-2);

  /* Core palette — mapped to AAD OG tokens */
  --c-bg: #F7FBFE;          /* --base-02 */
  --c-surface: #ffffff;     /* --base-01 */
  --c-surface-2: #F3F8FC;   /* --base-03 */
  --c-text: #4A5669;        /* --base-content */
  --c-text-strong: #002D5D; /* --base-emphasis */
  --c-text-muted: #808895;  /* --base-mute */
  --c-border: #DADADA;      /* --border-color */
  --c-primary: #1C7CD5;     /* --primary */
  --c-primary-hover: #1660A4; /* --primary-focus */
  --c-on-primary: #ffffff;  /* note: OG --primary-content is #040C13 (dark); white kept for contrast on solid primary fills — swap if preferred */
  --c-danger: #ff5861;      /* --error */
  --c-warning: #ffbe00;     /* --warning */
  --c-success: #00a96e;     /* --success */
  --c-info: #00b6ff;        /* --info */
  --c-focus: rgba(28, 124, 213, 0.35); /* derived from --primary */
}

/* Semantic aliases used directly by the AI stylesheets */
:root,
.theme--base {
  --surface-1: var(--c-bg);
  --surface-2: var(--c-surface-2);
  --surface: var(--c-surface);
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text-strong, var(--c-text));
  --border: var(--c-border);
  --link: var(--c-primary);
  --link-hover: var(--c-primary-hover);
  --focus: var(--c-focus);
}

.theme--emphasis {
  --surface-1: var(--c-primary);
  --surface-2: var(--c-primary);
  --surface: var(--c-primary);
  --text: var(--c-on-primary);
  --text-muted: rgba(255, 255, 255, 0.85);
  --text-strong: var(--c-on-primary);
  --border: rgba(255, 255, 255, 0.22);
  --link: var(--c-on-primary);
  --link-hover: rgba(255, 255, 255, 0.88);
  --focus: rgba(255, 255, 255, 0.35);
}

.theme--primary {
  --surface-1: color-mix(in srgb, var(--c-primary) 10%, white);
  --surface-2: color-mix(in srgb, var(--c-primary) 16%, white);
  --surface: #ffffff;
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text);
  --border: color-mix(in srgb, var(--c-primary) 20%, var(--c-border));
  --link: var(--c-primary);
  --link-hover: var(--c-primary-hover);
  --focus: var(--c-focus);
}

.theme--success {
  --surface-1: color-mix(in srgb, var(--c-success) 10%, white);
  --surface-2: color-mix(in srgb, var(--c-success) 16%, white);
  --surface: #ffffff;
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text);
  --border: color-mix(in srgb, var(--c-success) 18%, var(--c-border));
  --link: var(--c-success);
  --link-hover: color-mix(in srgb, var(--c-success) 85%, black);
  --focus: color-mix(in srgb, var(--c-success) 35%, transparent);
}

.theme--warning {
  --surface-1: color-mix(in srgb, var(--c-warning) 10%, white);
  --surface-2: color-mix(in srgb, var(--c-warning) 16%, white);
  --surface: #ffffff;
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text);
  --border: color-mix(in srgb, var(--c-warning) 18%, var(--c-border));
  --link: var(--c-warning);
  --link-hover: color-mix(in srgb, var(--c-warning) 85%, black);
  --focus: color-mix(in srgb, var(--c-warning) 35%, transparent);
}

.theme--danger {
  --surface-1: color-mix(in srgb, var(--c-danger) 10%, white);
  --surface-2: color-mix(in srgb, var(--c-danger) 16%, white);
  --surface: #ffffff;
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text);
  --border: color-mix(in srgb, var(--c-danger) 18%, var(--c-border));
  --link: var(--c-danger);
  --link-hover: color-mix(in srgb, var(--c-danger) 85%, black);
  --focus: color-mix(in srgb, var(--c-danger) 35%, transparent);
}

.theme--info {
  --surface-1: color-mix(in srgb, var(--c-info) 10%, white);
  --surface-2: color-mix(in srgb, var(--c-info) 16%, white);
  --surface: #ffffff;
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-strong: var(--c-text);
  --border: color-mix(in srgb, var(--c-info) 18%, var(--c-border));
  --link: var(--c-info);
  --link-hover: color-mix(in srgb, var(--c-info) 85%, black);
  --focus: color-mix(in srgb, var(--c-info) 35%, transparent);
}

/* Grid + button token sets (also defined on gen2) */
:root {
  --grid-cols-1: 1;
  --grid-cols-2: 2;
  --grid-cols-3: 3;
  --grid-cols-4: 4;
  --grid-cols-5: 5;
  --grid-cols-6: 6;
  --grid-auto-min: 16rem;
}

:root {
  --btn-radius: var(--radius-sm);
  --btn-font-size: var(--text-sm, 0.9375rem);
  --btn-font-size-sm: var(--text-xs, 0.875rem);
  --btn-font-size-lg: var(--text-md, 1rem);
  --btn-pad-y: var(--space-2, 0.5rem);
  --btn-pad-x: var(--space-4, 1rem);
  --btn-pad-y-sm: var(--space-1, 0.375rem);
  --btn-pad-x-sm: var(--space-3, 0.75rem);
  --btn-pad-y-lg: var(--space-3, 0.75rem);
  --btn-pad-x-lg: var(--space-5, 1.25rem);
  --btn-gap: var(--space-2, 0.5rem);
  --btn-border-width: 1px;
  --btn-focus-width: 3px;
  --btn-transition: var(--dur-3) var(--ease-standard);
  --btn-primary-bg: var(--link);
  --btn-primary-fg: var(--surface);
  --btn-primary-border: var(--link);
  --btn-secondary-bg: var(--surface, #ffffff);
  --btn-secondary-fg: var(--text);
  --btn-secondary-border: var(--link);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--link);
  --btn-ghost-border: transparent;
  --btn-disabled-opacity: 0.55;
}