/*
 * CoPlanner Theme Foundation — clean-room rewrite of layout chrome.
 *
 * Design tokens measured from the rendered dashboard at 1440x900 using
 * Playwright computed-style inspection (test/visual/scripts/measure_tokens.py).
 * No values were copied from any third-party theme source.
 *
 * Namespace: cp-* (CoPlanner) replaces the vendor pc-* namespace.
 * Loaded additively; matches nothing until cp-* markup is rendered.
 */

:root {
  /* Layout geometry — measured from rendered output */
  --cp-sidebar-width: 260px;
  --cp-sidebar-collapsed-width: 0px;
  --cp-header-height: 60px;
  --cp-header-padding-x: 25px;
  --cp-content-padding-x: 35px;
  --cp-content-padding-top: 20px;
  --cp-footer-margin-top: 60px;
  --cp-footer-padding-y: 15px;
  --cp-footer-wrapper-padding-x: 40px;

  /* Colors — measured from rendered output */
  --cp-body-bg: #f8f9fc;
  --cp-body-color: #333333;
  --cp-sidebar-bg: #ffffff;
  --cp-sidebar-shadow: 1px 0 0 0 #f0f0f0;
  --cp-sidebar-text: #333333;
  --cp-sidebar-caption-color: #495057;
  --cp-header-bg: #ffffff;
  --cp-header-color: #141414;
  --cp-header-shadow: 0 1px 0 0 #f0f0f0;
  --cp-active-color: #1890ff;
  --cp-link-color: #1890ff;
  --cp-badge-success-bg: #52c41a;

  /* Typography — measured */
  --cp-font-family-base: "Inter", sans-serif;
  --cp-font-family-brand: "Poppins", sans-serif;
  --cp-font-size-base: 14px;
  --cp-line-height-base: 21px;
  --cp-sidebar-caption-font-size: 12px;
  --cp-breadcrumb-font-size: 13px;
  --cp-brand-font-size: 24px;
  --cp-brand-line-height: 36px;
  --cp-brand-font-weight: 600;

  /* Sidebar item geometry — measured */
  --cp-sidebar-item-height: 44px;
  --cp-sidebar-link-padding-x: 24px;
  --cp-sidebar-link-padding-y: 10px;
  --cp-sidebar-micon-width: 18px;
  --cp-sidebar-micon-margin-right: 15px;
  --cp-sidebar-caption-padding-top: 24px;
  --cp-sidebar-caption-padding-bottom: 12px;
  --cp-sidebar-m-header-height: 60px;
  --cp-sidebar-m-header-padding: 16px 24px;

  /* Header geometry — measured */
  --cp-header-h-item-margin-right: 8px;
  --cp-head-link-size: 34px;
  --cp-head-link-border-radius: 4px;
  --cp-head-link-margin-right: 4px;
  --cp-h-badge-size: 18px;
  --cp-h-badge-font-size: 9px;
  --cp-h-badge-padding: 3.15px 5.85px;

  /* Dropdown — measured */
  --cp-dropdown-padding-y: 8px;
  --cp-dropdown-border-radius: 4px;
  --cp-dropdown-shadow: 0 4px 24px 0 rgba(62, 57, 107, 0.18);

  /* z-index scale — measured */
  --cp-z-sidebar: 1026;
  --cp-z-header: 1025;
  --cp-z-page-header: 1023;
  --cp-z-footer: 995;
  --cp-z-dropdown: 8;
  --cp-z-overlay: 1024;

  /* Transitions — measured */
  --cp-sidebar-transition: width 0.15s;

  /* Breakpoint — measured (mobile collapse button visible at <=1024px) */
  --cp-breakpoint-mobile: 1024px;

  /* ── Surfaces ────────────────────────────────────────────────────────────
     Figure-ground tokens for content that sits directly on --cp-body-bg
     without a Bootstrap .card wrapper (flush layouts, e.g. the planboard).
     A surface is a background + hairline + radius + whisper-shadow — it
     restores separation from the page WITHOUT restoring card padding. */
  --cp-surface-bg: #ffffff;
  --cp-surface-border: #e2e7ef;
  --cp-surface-radius: 6px;
  --cp-surface-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.04);

  /* ── Planboard grid ──────────────────────────────────────────────────────
     Weekday/weekend banding, header rail and name-column rail. Values are
     chosen so weekend ≠ weekday ≠ page background at a glance while staying
     subtle. Weekend is never the sole carrier of meaning — the day-name
     ("SAT"/"SUN", "S") is always rendered in the column header. */
  --cp-planboard-cell-bg: #ffffff;
  --cp-planboard-grid-line: #e6ebf1;
  --cp-planboard-weekend-bg: #e9edf3;
  /* The grid line is tuned against a WHITE cell; on the weekend band it is only
     a ~1% step and two touching weekend cells read as one block. The band gets
     its own rule, one step darker than its own fill, so the division stays
     visible without adding weight to the weekday grid. */
  --cp-planboard-weekend-border: #ced7e3;
  --cp-planboard-weekend-color: #6b7280;
  --cp-planboard-head-bg: #f2f5fa;
  --cp-planboard-head-weekend-bg: #e4e9f1;
  --cp-planboard-head-color: #475467;
  --cp-planboard-head-border: #d3dae5;
  --cp-planboard-namecol-bg: #f2f5fa;
  --cp-planboard-namecol-border: #d3dae5;
  --cp-planboard-today-bg: #e3f2ff;
  --cp-planboard-today-border: #0d6efd;

  /* ── Toolbar controls ────────────────────────────────────────────────────
     Lifts flat .btn-outline-secondary greys: real surface, defined hairline,
     darker label text, brand-tinted icon and a blue-wash hover/focus. */
  --cp-control-bg: #ffffff;
  --cp-control-border: #d5dce6;
  --cp-control-color: #344054;
  --cp-control-muted-color: #98a2b3;
  --cp-control-icon: #1890ff;
  --cp-control-hover-bg: #eef6ff;
  --cp-control-hover-border: #8ec5ff;
  --cp-control-hover-color: #0b6bcb;
  --cp-control-focus-ring: rgba(24, 144, 255, 0.3);

  /* ── Page header banner accent ───────────────────────────────────────────
     Shared "banner" treatment (soft gradient wash + left accent bar) used
     by every index-style page header (`.cp-header-banner` in layout.css) —
     originated on the Planboard toolbar and the Reports index page. Same
     hue as --cp-control-icon (kept as its own token, not reused directly,
     since it names a header identity accent rather than a control state)
     so headers read as one family with the search icon / dropdown
     affordances that often share the row. The -rgb companion feeds the
     gradient's rgba() alpha ramp. */
  --cp-header-accent: #1890ff;
  --cp-header-accent-rgb: 24, 144, 255;

  /* ── Per-module header accents ───────────────────────────────────────────
     One accent pair per sidebar caption group (see shared/cp/_sidebar.html.erb),
     so each nav group's index pages read as their own visual family instead of
     sharing Planboard's blue. Consumed via the `.cp-accent-*` modifier classes
     in layout.css, which locally reassign --cp-header-accent(-rgb) — the
     `.cp-header-banner` shell rules themselves stay written once against
     --cp-header-accent. Planboard itself (no caption group, top-level nav
     item) keeps the plain --cp-header-accent default above, unchanged. */
  --cp-accent-duty: #0d9488; /* Duty Planning */
  --cp-accent-duty-rgb: 13, 148, 136;
  --cp-accent-crm: #ea580c; /* CRM & Sales */
  --cp-accent-crm-rgb: 234, 88, 12;
  --cp-accent-pm: #6366f1; /* Timesheets — Purchase Orders/Projects moved to the plain default
                               blue (they're both covered by Planboard's "Planning & Budget"
                               module toggle on the Organization page, whose card is also
                               unaccented blue), leaving this token solely for Timesheets */
  --cp-accent-pm-rgb: 99, 102, 241;
  --cp-accent-resources: #16a34a; /* Resources */
  --cp-accent-resources-rgb: 22, 163, 74;
  --cp-accent-reports: #e11d48; /* Reports */
  --cp-accent-reports-rgb: 225, 29, 72;
  --cp-accent-admin: #d97706; /* Administration */
  --cp-accent-admin-rgb: 217, 119, 6;

  /* ── Cronos TIA integration accents ─────────────────────────────────────
     Item 2 follow-up (dev request) — the two TIA integration cards on the
     Organization page should read as "similar to, but a subtler variant of"
     the core module each one feeds, not a generic shared admin accent.
     Derived (not invented) from the two source tokens above:
       - tia-sync    → one step lighter than --cp-accent-pm (indigo-500),
                        which the comment on that token documents as now
                        "solely for Timesheets" — tia_sync feeds Timesheets.
       - tia-holidays → one step lighter than --cp-header-accent (#1890ff,
                        the Ant Design blue-6 already used app-wide), which
                        is Planboard's own colour: Planning & Budget/Planboard
                        deliberately carries no .cp-accent-* token of its own
                        (see the comment above), so this integration's accent
                        is derived from the header accent it actually renders
                        with, not from a module accent that doesn't exist. */
  --cp-accent-tia-sync: #818cf8; /* indigo-400 — one step lighter than cp-accent-pm's indigo-500 */
  --cp-accent-tia-sync-rgb: 129, 140, 248;
  --cp-accent-tia-holidays: #40a9ff; /* Ant blue-5 — one step lighter than cp-header-accent's blue-6 */
  --cp-accent-tia-holidays-rgb: 64, 169, 255;

  /* ── Cronos TIA integration icon accents ─────────────────────────────────
     Accessibility fix (WCAG 1.4.11) — the border tokens above are
     deliberately subtle and fall short of the 3:1 UI-component contrast
     floor when also used to colour the icon glyph (measured 2.98:1 for
     tia-sync, 2.52:1 for tia-holidays against white). Rather than brighten
     the border and lose the intentional subtlety, the icon glyph gets its
     own, separately-tuned token in the same colour family, shifted one
     step darker (not lighter, like the border) from each integration's
     source token for legibility:
       - tia-sync-icon    → indigo-500, i.e. --cp-accent-pm's own light
                             value unchanged (Timesheets' own accent) —
                             one step darker than the tia-sync border's
                             indigo-400. ~4.1:1 against the actual
                             icon-square background (10% tia-sync tint
                             over the white card), ~4.5:1 against plain
                             white.
       - tia-holidays-icon → Ant blue-7, one step darker than
                             --cp-header-accent's blue-6 base (blue-6
                             itself measures ~2.97:1 here — just short of
                             the floor, hence skipping to blue-7). ~4.6:1
                             against the actual icon-square background
                             (10% tia-holidays tint over the white card),
                             ~5.0:1 against plain white.
     See dark_theme.css for the dark-theme counterparts. Consumed by the
     .cp-accent-tia-sync / .cp-accent-tia-holidays icon-glyph overrides in
     layout.css — the border tokens above stay wired to --cp-header-accent
     exactly as before. */
  --cp-accent-tia-sync-icon: #6366f1; /* indigo-500 */
  --cp-accent-tia-holidays-icon: #096dd9; /* Ant blue-7 */

  /* ── Modals ──────────────────────────────────────────────────────────────
     Height ceiling for a modal's scroll region. Leaves ~200px for the
     viewport chrome plus the modal's own header/footer and vertical margin.
     Any modal body that must stay bounded (so a pinned footer stays pinned
     and the body scrolls instead) should reference this rather than
     re-deriving its own calc(). */
  --cp-modal-max-height: calc(100vh - 200px);
}