/**
 * =============================================================================
 * BIZ-CATALYST DESIGN TOKENS
 * bc-tokens.css — v1.0
 * =============================================================================
 *
 * This file is the single source of truth for all visual decisions across
 * the Biz-Catalyst platform and all applettes.
 *
 * HOW TO USE:
 *   1. Load this file FIRST, before biz-catalyst-core.css and any app stylesheet.
 *   2. App stylesheets reference tokens only — no hardcoded colour, size or
 *      spacing values should appear in any app CSS.
 *   3. Tenant branding overrides (Section 2) are injected at runtime by the
 *      platform into a <style> tag in the <head>, overriding the defaults below.
 *   4. App-specific overrides (Section 3) are loaded last and may override
 *      tenant branding where a specific app requires it.
 *
 * NAMING CONVENTION:
 *   All tokens are prefixed --bc- to avoid collisions with app-specific
 *   variables or any third-party stylesheets.
 *   Format: --bc-[category]-[variant]
 *
 * =============================================================================
 */


/* =============================================================================
   SECTION 1: PLATFORM DEFAULTS
   These are the base Biz-Catalyst brand values.
   They apply when no tenant branding has been configured.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     1.1 STRUCTURAL CHROME
     The dark header that provides visual identity across all apps.
     Not intended to be overridden by tenant branding — this is the platform
     frame, not the tenant's canvas.
     --------------------------------------------------------------------------- */

  --bc-header-bg:           #1a1a2e;  /* The nav bar. Consistent across all apps. */
  --bc-header-text:         rgba(255, 255, 255, 0.8);
  --bc-header-text-active:  #ffffff;


  /* ---------------------------------------------------------------------------
     1.2 PRIMARY ACTION COLOUR
     Used for: primary buttons, focus rings, active states, links.
     Indigo — chosen as the platform's own identity colour, distinct from
     any single tenant's branding.
     --------------------------------------------------------------------------- */

  --bc-primary:             #4f46e5;
  --bc-primary-hover:       #4338ca;
  --bc-primary-tint:        #ede9fe;  /* Light backgrounds, focus rings */
  --bc-primary-disabled:    #a5b4fc;  /* Disabled primary button state */


  /* ---------------------------------------------------------------------------
     1.3 SEMANTIC COLOURS
     Success / Warning / Danger — consistent across all apps.
     These are NOT overridden by tenant branding.
     --------------------------------------------------------------------------- */

  --bc-success:             #059669;
  --bc-success-hover:       #047857;
  --bc-success-tint:        #d1fae5;
  --bc-success-border:      #a7f3d0;

  --bc-warning:             #d97706;
  --bc-warning-tint:        #fef3c7;
  --bc-warning-border:      #fcd34d;

  --bc-danger:              #dc2626;
  --bc-danger-hover:        #b91c1c;
  --bc-danger-tint:         #fee2e2;
  --bc-danger-border:       #fecaca;

  --bc-info:                #2563eb;
  --bc-info-tint:           #dbeafe;
  --bc-info-border:         #bfdbfe;


  /* ---------------------------------------------------------------------------
     1.4 NEUTRAL PALETTE
     Text, borders, surfaces and backgrounds.
     --------------------------------------------------------------------------- */

  --bc-text:                #1f2937;   /* Primary body text */
  --bc-text-muted:          #6b7280;   /* Secondary / hint text */
  --bc-text-disabled:       #9ca3af;   /* Placeholder / disabled text */

  --bc-border:              #e5e7eb;   /* Default border colour */
  --bc-border-strong:       #d1d5db;   /* Input borders, dividers under emphasis */

  --bc-surface:             #ffffff;   /* Card and modal backgrounds */
  --bc-surface-raised:      #f9fafb;   /* Table headers, inset panels, page bg */
  --bc-page-bg:             #f9fafb;   /* Page body background */

  --bc-overlay:             rgba(0, 0, 0, 0.5);  /* Modal scrim */


  /* ---------------------------------------------------------------------------
     1.5 TYPOGRAPHY
     Inter is loaded from Google Fonts. The system-font stack is the fallback.
     One font, loaded once, consistent everywhere.
     --------------------------------------------------------------------------- */

  --bc-font:                'Inter', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, sans-serif;
  --bc-font-mono:           'SF Mono', Monaco, Consolas,
                            'Roboto Mono', monospace;

  --bc-font-size-xs:        0.75rem;    /* 12px — badges, table headers, hints */
  --bc-font-size-sm:        0.875rem;   /* 14px — secondary text, table body */
  --bc-font-size-base:      1rem;       /* 16px — body copy */
  --bc-font-size-lg:        1.125rem;   /* 18px — card titles, modal titles */
  --bc-font-size-xl:        1.25rem;    /* 20px — section headings */
  --bc-font-size-2xl:       1.5rem;     /* 24px — page titles */
  --bc-font-size-3xl:       1.875rem;   /* 30px — dashboard hero stats */

  --bc-font-weight-normal:  400;
  --bc-font-weight-medium:  500;        /* Buttons, labels, nav links */
  --bc-font-weight-semibold: 600;       /* Card titles, section headings */
  --bc-font-weight-bold:    700;        /* Logo, page hero elements */

  --bc-line-height:         1.6;        /* Body text */
  --bc-line-height-tight:   1.3;        /* Headings */


  /* ---------------------------------------------------------------------------
     1.6 SPACING SCALE
     Based on a 4px base unit. Use these tokens for all margin, padding and gap
     values. Do not use arbitrary values in app stylesheets.
     --------------------------------------------------------------------------- */

  --bc-space-1:             0.25rem;    /*  4px */
  --bc-space-2:             0.5rem;     /*  8px */
  --bc-space-3:             0.75rem;    /* 12px */
  --bc-space-4:             1rem;       /* 16px */
  --bc-space-5:             1.25rem;    /* 20px */
  --bc-space-6:             1.5rem;     /* 24px */
  --bc-space-8:             2rem;       /* 32px */
  --bc-space-10:            2.5rem;     /* 40px */
  --bc-space-12:            3rem;       /* 48px */


  /* ---------------------------------------------------------------------------
     1.7 SHAPE, SHADOW & MOTION
     --------------------------------------------------------------------------- */

  --bc-radius-sm:           0.25rem;    /*  4px — badges, tags */
  --bc-radius:              0.5rem;     /*  8px — buttons, inputs, cards */
  --bc-radius-lg:           0.75rem;    /* 12px — modals, large cards */
  --bc-radius-full:         9999px;     /* Pills */

  --bc-shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.06);
  --bc-shadow:              0 1px 3px rgba(0, 0, 0, 0.1),
                            0 1px 2px rgba(0, 0, 0, 0.06);
  --bc-shadow-md:           0 4px 6px rgba(0, 0, 0, 0.07),
                            0 2px 4px rgba(0, 0, 0, 0.06);
  --bc-shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.1),
                            0 4px 6px rgba(0, 0, 0, 0.05);

  --bc-transition:          0.2s ease;  /* Standard transition duration */
  --bc-transition-slow:     0.3s ease;  /* Modals, drawers */


  /* ---------------------------------------------------------------------------
     1.8 LAYOUT
     --------------------------------------------------------------------------- */

  --bc-container-max:       1200px;     /* Main content container */
  --bc-header-height:       56px;       /* Nav bar — used for sticky offset calculations */


  /* ---------------------------------------------------------------------------
     1.9 APP ACCENT COLOURS
     One distinct colour per applette, used for:
       - The L-bracket accent on the app name in the nav header
       - App icon backgrounds on the platform dashboard
       - Any app-specific highlight that needs to feel "owned" by that app
     These are NOT the primary action colour — buttons etc. always use
     --bc-primary. These are identity markers only.

     Final palette to be confirmed with Steve. These are working placeholders
     chosen for distinctiveness and accessibility against #1a1a2e.
     --------------------------------------------------------------------------- */

  --bc-app-cadence:         #10b981;    /* Emerald green */
  --bc-app-planner:         #3b82f6;    /* Blue */
  --bc-app-quotable:        #f59e0b;    /* Amber */
  --bc-app-lightbulb:       #eab308;    /* Yellow */
  --bc-app-pencil-in:       #8b5cf6;    /* Violet */
  --bc-app-scribe:          #06b6d4;    /* Cyan */

  /* Future apps — reserve slots, assign colours when apps are named */
  --bc-app-slot-7:          #ec4899;    /* Pink */
  --bc-app-slot-8:          #14b8a6;    /* Teal */
  --bc-app-slot-9:          #f97316;    /* Orange */
  --bc-app-slot-10:         #a855f7;    /* Purple */
}


/* =============================================================================
   SECTION 2: TENANT BRANDING TOKENS
   These tokens are overridden at runtime by the platform for each tenant,
   based on their Account > Branding settings.

   The platform injects a <style> block into the page <head> containing
   overrides in this format:

     :root {
       --bc-brand-primary:    #e63946;
       --bc-brand-secondary:  #457b9d;
       --bc-brand-logo-url:   url('https://cdn.biz-catalyst.com/tenants/123/logo.png');
       --bc-brand-name:       'Acme Corp';
     }

   Where tenant branding is NOT configured, these fall back to the platform
   defaults defined above.

   WHERE BRANDING IS APPLIED:
     - --bc-brand-primary     → replaces --bc-primary for buttons, links,
                                focus rings and active states throughout all apps
     - --bc-brand-secondary   → available for accents, gradients, highlights
     - --bc-brand-logo-url    → displayed in app headers and public-facing pages
                                (booking page, proposal viewer, client portal)
     - --bc-brand-name        → displayed as the business name where the app
                                title would otherwise appear on public pages

   WHERE BRANDING IS NOT APPLIED (platform chrome, never overridden):
     - --bc-header-bg         (always #1a1a2e — the platform frame)
     - --bc-danger / success / warning  (semantic colours must stay consistent)
     - --bc-app-[name]        (app accent colours are platform identity, not tenant)

   APP-LEVEL OVERRIDE:
     If a tenant's brand colours create contrast or legibility problems in a
     specific app, that app can define its own local override in its app
     stylesheet, scoped under a body class e.g. body.app-quotable { ... }.
     This should be the exception, not the rule.
   ============================================================================= */

:root {
  --bc-brand-primary:       var(--bc-primary);
  --bc-brand-primary-hover: var(--bc-primary-hover);
  --bc-brand-primary-tint:  var(--bc-primary-tint);
  --bc-brand-secondary:     var(--bc-primary);   /* defaults to primary until set */
  --bc-brand-logo-url:      none;
  --bc-brand-name:          'Biz-Catalyst';
}


/* =============================================================================
   SECTION 3: GOOGLE FONTS IMPORT NOTE
   The following @import should be the very first line of the compiled
   stylesheet (before this token file is concatenated). It is noted here
   for documentation purposes only — do not place @import after :root rules.

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

   This loads Inter in four weights. display=swap ensures text is visible
   during font load. No other weights are needed.
   ============================================================================= */
