/*
 * Corporate Portal design tokens.
 *
 * This file is the single source of truth for shared visual values.
 * Component selectors remain in styles.css while they are migrated safely.
 */

:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Company brand. Legacy --red aliases remain during component migration. */
  --brand-primary: #e30512;
  --brand-primary-strong: #c9000d;
  --brand-primary-soft: rgba(227, 5, 18, 0.08);
  --brand-on-primary: #ffffff;
  --brand-shadow: rgba(227, 5, 18, 0.16);
  --red: var(--brand-primary);
  --red-strong: var(--brand-primary-strong);
  --red-soft: var(--brand-primary-soft);

  /* Shared semantic colors never change with the company brand. */
  --blue: #0a2e74;
  --blue-2: #1957ad;
  --blue-soft: rgba(25, 87, 173, 0.07);
  --ink: #141f38;
  --muted: #6b7a8c;
  --line: rgba(134, 151, 176, 0.2);
  --line-strong: rgba(84, 105, 139, 0.26);
  --surface: #f5f7fc;
  --surface-2: #eef2f8;
  --card-surface: #ffffff;
  --card-subtle: #fbfcfe;
  --panel: rgba(255, 255, 255, 0.6);
  --panel-strong: rgba(255, 255, 255, 0.82);
  --success: #1f8553;
  --warning: #b77912;
  --danger: #d23a3a;
  --danger-soft: rgba(210, 58, 58, 0.10);

  /* Business-trip calendar categories, independent of the company brand. */
  --business-trip-trip: #e8aeb4;
  --business-trip-vacation: #a8d5bd;
  --business-trip-day-off: #adc8e7;
  --business-trip-city: #c9b5df;
  --business-trip-sick: #e3bd9d;
  --business-trip-other: #becbd8;

  /* Messenger: readable surfaces shared by compact and expanded layouts. */
  --chat-accent: #176ba5;
  --chat-action: #176ba5;
  --chat-icon: #657889;
  --chat-avatar-bg: #7295bb;
  --chat-wall: #f6f7f9;
  --chat-outgoing: #def2d2;
  --chat-outgoing-ink: #182c20;
  --chat-outgoing-meta: #476b42;
  --chat-message-size: 15px;
  --chat-motion: 220ms cubic-bezier(.2,.8,.2,1);
  --chat-radius: 16px;

  /* Shape, depth and material */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 16px 36px rgba(16, 24, 39, 0.055);
  --shadow-soft: 0 6px 18px rgba(16, 24, 39, 0.045);
  --blur: blur(26px) saturate(165%);

  /* Typography */
  --type-page: clamp(24px, 2.2vw, 30px);
  --type-section: 18px;
  --type-card: 15px;
  --type-body: 13px;
  --type-caption: 11px;
  --weight-button: 450;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-heading: 600;

  /* Spacing scale for new and migrated components */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shared checkbox geometry and marks. Native input owns state and semantics. */
  --checkbox-size: 18px;
  --checkbox-radius: 4px;
  --checkbox-border-width: 1.5px;
  --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --checkbox-mixed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Shared control metrics */
  --control-height-sm: 34px;
  --window-control-size: 34px;
  --control-height: 40px;
  --control-height-lg: 50px;
  --portal-fab-size: 48px;
  --portal-fab-icon-size: 21px;
  --nav-icon-size: 20px;
  --loader-size: 18px;
  --loader-stroke: 2px;
  --loader-duration: 700ms;
  --loader-panel-height: 260px;
  --motion-fast: 150ms ease;
  --focus-border: var(--line-strong);
  --focus-ring: var(--brand-primary);
  --focus-ring-width: 2px;
}

html.theme-boot-dark,
body.theme-dark {
  color-scheme: dark;
  --chat-accent: #56aeed;
  --chat-action: #3b6da8;
  --chat-icon: #eef4f9;
  --chat-avatar-bg: #536f91;
  --chat-wall: #0e171e;
  --chat-outgoing: #3b6da8;
  --chat-outgoing-ink: #f3f8fc;
  --chat-outgoing-meta: #e9f0f7;
  --brand-primary: #f24752;
  --brand-primary-strong: #d83a44;
  --brand-primary-soft: rgba(242, 71, 82, 0.13);
  --brand-shadow: rgba(242, 71, 82, 0.26);
  --blue: #668fed;
  --blue-2: #85adfa;
  --blue-soft: rgba(102, 143, 237, 0.14);
  --ink: #ebf0f7;
  --muted: #9eaec2;
  --line: rgba(152, 170, 199, 0.18);
  --line-strong: rgba(168, 188, 220, 0.28);
  --surface: #121721;
  --surface-2: #1b2230;
  --card-surface: #1b2230;
  --card-subtle: #171d27;
  --panel: rgba(31, 36, 51, 0.58);
  --panel-strong: rgba(36, 43, 61, 0.82);
  --success: #4cbc85;
  --warning: #e0b35e;
  --danger: #eb615c;
  --business-trip-trip: #eab3b7;
  --business-trip-vacation: #add7bd;
  --business-trip-day-off: #b2cbea;
  --business-trip-city: #cdbde2;
  --business-trip-sick: #e6c19f;
  --business-trip-other: #b3c2d1;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/*
 * Pointer and touch focus keep the field itself active without drawing a ring.
 * Keyboard navigation restores the brand focus tokens before focus moves.
 */
html[data-input-modality="pointer"],
html[data-input-modality="pointer"] body {
  --focus-border: var(--line-strong);
  --focus-ring: transparent;
}

/* Company themes can scope a complete page or an isolated UI Kit preview. */
[data-company="izi"] {
  --brand-primary: #236615;
  --brand-primary-strong: #194d0e;
  --brand-primary-soft: rgba(35, 102, 21, 0.10);
  --brand-on-primary: #ffffff;
  --brand-shadow: rgba(35, 102, 21, 0.20);
  --red: var(--brand-primary);
  --red-strong: var(--brand-primary-strong);
  --red-soft: var(--brand-primary-soft);
}

[data-company="evopro"] {
  --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='%23261800' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --checkbox-mixed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23261800' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --brand-primary: #f7a30a;
  --brand-primary-strong: #d98a00;
  --brand-primary-soft: rgba(247, 163, 10, 0.13);
  --brand-on-primary: #261800;
  --brand-action: var(--brand-primary);
  --brand-action-strong: color-mix(in srgb, var(--brand-action) 96%, black);
  --brand-on-action: #ffffff;
  --page-heading-weight: var(--weight-body);
  --brand-shadow: rgba(247, 163, 10, 0.22);
  --red: var(--brand-primary);
  --red-strong: var(--brand-primary-strong);
  --red-soft: var(--brand-primary-soft);
}

html.theme-boot-dark [data-company="izi"],
html.theme-boot-dark[data-company="izi"],
body.theme-dark [data-company="izi"],
body.theme-dark[data-company="izi"] {
  --brand-primary: #67bd55;
  --brand-primary-strong: #83d372;
  --brand-primary-soft: rgba(103, 189, 85, 0.16);
  --brand-shadow: rgba(103, 189, 85, 0.24);
}

html.theme-boot-dark [data-company="evopro"],
html.theme-boot-dark[data-company="evopro"],
body.theme-dark [data-company="evopro"],
body.theme-dark[data-company="evopro"] {
  --brand-primary: #ffb53d;
  --brand-primary-strong: #ffc869;
  --brand-primary-soft: rgba(255, 181, 61, 0.17);
  --brand-shadow: rgba(255, 181, 61, 0.24);
}

@media (max-width: 700px) {
  :root {
    --type-page: 21px;
    --type-section: 17px;
    --type-card: 14.5px;
    --type-body: 12.5px;
    --type-caption: 10.5px;
  }
}