/* ==========================================================
   PUBLIC COMPANY PLATFORM -- /c/{slug}[/{page_slug}]
   Loaded first, always -- owns the base reset selector and every
   --cp-* design token the rest of this stack draws from. This whole
   directory (company_public/*.css) is the Public Company Platform's
   own numbered owner-file set, mirroring Company Workspace V2's
   --cw2-* / 01_tokens.css convention but deliberately a separate system
   (--cp-*, never --cw2-*) -- this is a wholly separate, unauthenticated
   surface with its own visual identity per company via
   --cp-primary/--cp-accent (set inline by company_public_layout.php from
   company_theme_settings). Do not import any of these files into any
   authenticated Company Workspace page, and do not put Company
   Workspace admin styles here.

   Load order (see company_public_layout.php):
     01_tokens.css      -- this file
     02_reset.css        -- body.cp-body
     03_shell.css         -- .cp-shell/.cp-page-title/.cp-meta/.cp-section/
                             .cp-contact/.cp-links/.cp-footer/404 page
     04_capability.css    -- Phase 2 app-contributed capability pages
     05_header.css        -- site header/nav/Follow
     06_hero.css           -- Home's Hero section
     07_homepage.css       -- Home's ordered section renderer shell
     08_content.css        -- Locations/Team/Updates (shared by homepage
                              previews AND their native full pages)
     09_layout_alignment.css -- homepage section layout/alignment variants
     10_custom_sections.css  -- admin-authored custom homepage sections
     11_panel_hero.css       -- Side Panel's own top-of-panel identity
                              card (avatar/name/contact/followers/actions)
     12_auth_modal.css       -- shared "sign up to continue" modal (all
                              gated actions: Comment/React/Follow/header)
     13_bottom_nav.css       -- phone-width bottom nav, signed-in viewers
                              only (Home/Store/back-to-Workspace/etc.)
     14_store.css            -- Store page Hero + offering Grid (Phase 1
                              Store presentation contract, shared with
                              Flutter's own native renderer)

   New rules should draw from the tokens below rather than a fresh
   hardcoded value; add a token here first if an existing one genuinely
   doesn't fit, rather than letting a new near-duplicate grey creep back
   in (this file replaced 8 near-duplicate hardcoded greys that had
   drifted apart from what were really 5 intended text tiers).
========================================================== */

* { box-sizing: border-box; }

/* ==========================================================
   DESIGN TOKENS -- --cp-*, deliberately NOT including --cp-primary/
   --cp-accent: those are injected inline per company by
   company_public_layout.php from company_theme_settings, so every rule
   that uses them keeps its own var(--cp-primary, <fallback>) pattern --
   this file has no single default for a value that's inherently
   per-company.
========================================================== */

:root {
    --cp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Surfaces */
    --cp-bg: #f4f5f7;
    --cp-surface: #ffffff;
    --cp-surface-soft: #eef1f4;

    /* Text */
    --cp-heading: #10151d;
    --cp-text: #3c4753;
    --cp-text-muted: #56606c;
    --cp-text-faint: #7a8794;
    --cp-inverse: #ffffff;

    /* Semantic -- same red as Personal Stream's --pw-danger, for the one
       destructive action this site has (Delete comment). */
    --cp-danger: #ef4444;

    /* Reaction colors -- same six canonical types/hex values as Company/
       Personal Stream (WorkspaceFeedInteractionRepository::REACTION_TYPES,
       --cw-reaction-* and --pw-reaction-*), kept in sync by hand since
       each surface owns its own CSS. */
    --cp-reaction-like: #2563eb;
    --cp-reaction-heart: #ef4444;
    --cp-reaction-laugh: #f59e0b;
    --cp-reaction-celebrate: #f97316;
    --cp-reaction-support: #10b981;
    --cp-reaction-dislike: #64748b;

    /* Borders */
    --cp-border: #e2e6ea;

    /* Radius scale -- sm/md for real rounded-rect components, lg for the
       one deliberately-square-but-rounded case (Hero's logo box), pill
       for anything short enough that a large radius already caps at a
       full stadium shape (buttons, badges) -- using 999px there instead
       of a coincidentally-large px value makes that intent explicit. */
    --cp-radius-sm: 8px;
    --cp-radius-md: 12px;
    --cp-radius-lg: 20px;
    --cp-radius-pill: 999px;

    /* Layout -- shared by .cp-shell (page content), .cp-site-header__inner,
       and .cp-home-section__inner (a full-width section's content, which
       must always match this regardless of its own edge-to-edge
       background -- see that rule's own comment). Previously two
       different hardcoded values (720px content vs 960px header) that
       had drifted out of sync, and both were too narrow to not look
       cramped on an actual desktop display -- this is the one place to
       change the site's content width going forward. */
    --cp-content-width: 1280px;

    /* Motion */
    --cp-transition: .15s;
}

/* Material Symbols Outlined FOIT guard (company_public_layout.php loads
   the font + material_symbols_foit_guard.php) -- 08_content.css's
   .cp-post__action-icon--comment/--reaction and .cp-post-reaction-
   picker__icon render their glyph via a ::before { content: "thumb_up" }
   pseudo-element, so each needs its own copy of the same opacity toggle
   workspace/01_tokens.css uses for the identical Personal Stream icons,
   rather than picking up a shared .material-symbols-outlined class rule. */
.cp-post__action-icon--comment::before,
.cp-post__action-icon--reaction::before,
.cp-post-reaction-picker__icon::before,
.cp-reaction-badge::before {
    opacity: 0;
}

html.ms-ready .cp-post__action-icon--comment::before,
html.ms-ready .cp-post__action-icon--reaction::before,
html.ms-ready .cp-post-reaction-picker__icon::before,
html.ms-ready .cp-reaction-badge::before {
    opacity: 1;
}