/*
 * Cinnova design tokens for the attendance app.
 * Ported from the "Cinnova Web" design system (tokens/semantic.css) plus the
 * status colors used by the attendance redesign. Every color in
 * cinnova-theme.css should come from here, so a dark set can later be added
 * by redefining these under a [data-bs-theme="dark"] selector only.
 */
:root {
  /* Font stacks */
  --cn-font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cn-font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cn-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Brand */
  --cn-primary: #6464FF;
  --cn-primary-rgb: 100, 100, 255;
  --cn-primary-hover: #595EE4;
  --cn-primary-strong: #5257C7;
  --cn-primary-tint: #E9EAFF;
  --cn-primary-tint-2: #ACAFFF;
  --cn-gradient-hero: linear-gradient(-11deg, #6464FF, #3C3C99);

  /* Neutrals */
  --cn-bg: #F5F5F5;
  --cn-surface: #FFFFFF;
  --cn-surface-hover: #FAFAFF;
  --cn-border: #EDEDED;
  --cn-border-input: #E0E0E0;
  --cn-row-line: #F0F0F0;
  --cn-text-strong: #000000;
  --cn-text: #2C2C2C;
  --cn-text-muted: #444444;
  --cn-text-inverse: #FFFFFF;

  /* Status (background / foreground pairs) */
  --cn-success-bg: #E3FBEF;  --cn-success-fg: #0F7A45;
  --cn-danger-bg: #FDECEC;   --cn-danger-fg: #B42318;  --cn-danger-text: #8F1D17;
  --cn-warning-bg: #FFF1CC;  --cn-warning-fg: #7A4F00;
  --cn-holiday-row: #FFFBEF;
  --cn-neutral-bg: #F5F5F5;  --cn-neutral-fg: #444444;
  --cn-online: #12B76A;

  /* Arrival timing (check-in time color) */
  --cn-time-ontime: #0F7A45;
  --cn-time-grace: #A86800;
  --cn-time-late: #C4320A;

  /* Radii */
  --cn-radius-pill: 100px;
  --cn-radius-lg: 20px;
  --cn-radius-md: 16px;
  --cn-radius-icon: 14px;
  --cn-radius-sm: 5px;

  /* Elevation */
  --cn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Shell */
  --cn-sidebar-width: 248px;
  --cn-topbar-height: 68px;
  --cn-topbar-bg: rgba(255, 255, 255, 0.72);

  /* Misc component colors */
  --cn-bg-rgb: 245, 245, 245;
  --cn-switch-off: #D6D6D6;
  --cn-switch-knob: #FFFFFF;
  --cn-disabled: #B0B0B0;
  --cn-ring-track: #EDEDF7;
  --cn-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/*
 * Dark theme. Set by the topbar toggle (include/cn_topbar_extras.php), which writes
 * data-bs-theme on <html>, so Bootstrap's own dark variables switch in step.
 * Brand blue stays; surfaces, text and status tints are re-derived for contrast.
 */
:root[data-bs-theme="dark"] {
  --cn-primary-hover: #7A7AFF;
  --cn-primary-strong: #ACAFFF;
  --cn-primary-tint: #26264D;
  --cn-primary-tint-2: #3D3F80;

  --cn-bg: #0F0F14;
  --cn-surface: #1A1A22;
  --cn-surface-hover: #22222D;
  --cn-border: #2A2A35;
  --cn-border-input: #3A3A46;
  --cn-row-line: #262630;
  --cn-text-strong: #FFFFFF;
  --cn-text: #E6E6EA;
  --cn-text-muted: #A6A6B0;

  --cn-success-bg: #12301F;  --cn-success-fg: #4ADE80;
  --cn-danger-bg: #3A1616;   --cn-danger-fg: #F87171;  --cn-danger-text: #FCA5A5;
  --cn-warning-bg: #3A2C0A;  --cn-warning-fg: #FBBF24;
  --cn-holiday-row: #2A2410;
  --cn-neutral-bg: #26262E;  --cn-neutral-fg: #B5B5BE;

  --cn-time-ontime: #4ADE80;
  --cn-time-grace: #FBBF24;
  --cn-time-late: #F87171;

  --cn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --cn-topbar-bg: rgba(15, 15, 20, 0.72);

  --cn-bg-rgb: 15, 15, 20;
  --cn-switch-off: #3A3A46;
  --cn-switch-knob: #F5F5F5;
  --cn-disabled: #5A5A66;
  --cn-ring-track: #2E2E3A;
  --cn-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E6E6EA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}