/* CluPilot customer-portal design tokens — refined enterprise, light, single
   orange accent. Framework-neutral CSS custom properties (work in Tailwind v3
   or v4). Values calibrated for AA contrast. See design handoff §6. */
:root {
    /* Surfaces (light, slightly cool) */
    --bg:            #f6f7f9;
    --surface:       #ffffff;
    --surface-2:     #f1f3f5;
    --surface-hover: #f8f9fb;

    /* Lines */
    --border:        #e4e7ec;
    --border-strong: #d0d5dd;

    /* Text */
    --text-strong:   #101828;
    --text:          #344054;
    --text-muted:    #667085;
    --text-faint:    #98a2b3;

    /* Accent = the single brand / interaction tone: orange */
    --accent:        #f97316;   /* brand tone: decorative fills, borders, tints, focus */
    --accent-hover:  #ea6a0c;
    --accent-active: #c2560a;   /* AA-safe fill for white text on orange (~5:1) */
    --accent-press:  #a8480a;   /* darker press/hover for accent-fill buttons */
    --accent-subtle: #fff4ec;
    --accent-border: #fed7aa;
    --accent-ring:   rgba(249, 115, 22, .35);
    --on-accent:     #ffffff;
    /* Accent as TEXT on light surfaces (links, small labels) must be dark enough
       for AA — #f97316 on white is only ~2.9:1, so text uses --accent-active. */
    --accent-text:   #c2560a;

    /* The ink plate: the dark surface used where the brand speaks rather than
       the product — the sign-in panel, the closing block of the public site.
       Warm rather than blue-black, so it reads as ink, not as chrome. */
    --plate:       #17140f;
    --plate-2:     #211d16;
    --plate-rule:  #39332a;
    --plate-text:  #ded7c9;
    --plate-muted: #93897a;

    /* Status semantics — only in badges/alerts, never a second decorative tone */
    --success: #067a48; --success-bg: #ecfdf3; --success-border: #abefc6;
    --success-bright: #30b15c; /* dots/rings/charts only (large marks, not small text) */
    --warning: #b54708; --warning-bg: #fffaeb; --warning-border: #fedf89;
    --danger:  #b42318; --danger-bg:  #fef3f2; --danger-border:  #fecdca;
    --info:    #175cd3; --info-bg:    #eff8ff; --info-border:    #b2ddff;

    /* Typography */
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    /* Display voice for headlines, shared with the public site so the two do
       not look like two different companies. Never used for body copy. */
    --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

    --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px;
    --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px;

    --lh-tight: 1.2; --lh-normal: 1.5;
    --tracking-tight: -0.02em;
    --tracking-label: 0.06em;

    /* Radius / shadow / motion / focus */
    --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);

    --dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms;
    --ease: cubic-bezier(.2, .6, .2, 1);

    --focus-ring: 0 0 0 3px var(--accent-ring);
}