/*
Theme Name: CounterWords
Theme URI: https://counterwords.net/
Author: CounterWords
Author URI: https://counterwords.net/
Description: A fast, private, and accurate custom WordPress theme for CounterWords.net. Includes a self-contained, browser-based Word Counter and Text Analyzer with custom count rules, selection-based counting, repetition intelligence, and writing pattern analysis. Fully responsive, accessible, SEO-friendly, ad-ready, and built with vanilla JavaScript. No page builders or paid plugins required.
Version: 1.9.2
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: counterwords
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar, full-width-template, editor-style, sticky-post, theme-options, footer-widgets, rtl-language-support

CounterWords is distributed under the terms of the GNU GPL v2 or later.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
 * Primary stylesheet.
 *
 * The bulk of the theme's presentation lives in:
 *   assets/css/main.css          (layout, components, blog, tool)
 *   assets/css/editor.css        (word counter workspace)
 *   assets/css/responsive.css    (media queries)
 *   assets/css/block-editor.css  (wp-admin block editor, via add_editor_style)
 *   rtl.css                      (right-to-left overrides, loaded when is_rtl())
 *
 * This file holds the required WordPress theme header (above) plus the
 * CSS custom properties (design tokens) that the Customizer overrides
 * inline. Keeping tokens here means the theme renders sensibly even if
 * an enqueued file fails to load.
 */

:root {
	/* Colors (overridable via Customizer -> inline styles) */
	--cw-color-primary: #0e7c86;
	--cw-color-primary-hover: #0b656d;
	/* Text/icon color placed ON a primary-filled surface. Never assume white:
	   in dark mode the primary is a bright teal, and white on it measures
	   1.9:1. The Customizer recomputes this from the chosen primary. */
	--cw-color-on-primary: #ffffff;
	--cw-color-secondary: #1f2937;
	--cw-color-accent: #14b8a6;
	--cw-color-heading: #111827;
	--cw-color-text: #374151;
	--cw-color-muted: #6b7280;
	--cw-color-bg: #f6f7f9;
	--cw-color-card: #ffffff;
	--cw-color-border: #e3e6ea;
	--cw-color-editor-bg: #ffffff;
	--cw-color-editor-text: #111827;
	--cw-color-warning: #b45309;
	--cw-color-warning-bg: #fef3c7;
	--cw-color-success: #047857;
	--cw-color-danger: #b91c1c;
	--cw-color-highlight: #fde68a;

	/* Typography */
	--cw-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--cw-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--cw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--cw-font-size-base: 17px;
	--cw-line-height: 1.65;
	--cw-h1-size: 2.15rem;
	--cw-h2-size: 1.6rem;
	--cw-h3-size: 1.28rem;

	/* Layout */
	--cw-content-width: 1200px;
	--cw-article-width: 760px;
	--cw-editor-width: 1200px;
	--cw-sidebar-width: 320px;
	--cw-radius: 10px;
	--cw-radius-sm: 6px;
	--cw-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
	--cw-shadow-lg: 0 6px 24px rgba(17, 24, 39, 0.08);
	--cw-gap: 24px;
	--cw-header-height: 64px;

	/* Minimum comfortable touch target (WCAG 2.5.5 / platform guidance). */
	--cw-tap: 44px;

	/* Offset that sticky elements inside the page must clear. Overridden to
	   the header height by the has-sticky-header body class. */
	--cw-sticky-top: 0px;

	/* Height reserved for the mobile live-count bar. */
	--cw-livebar-height: 58px;

	/* Bottom inset for devices with a home indicator / gesture bar. */
	--cw-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.has-sticky-header {
	--cw-sticky-top: var(--cw-header-height);
}

/* Dark mode tokens. Applied when <html data-theme="dark"> is set. */
:root[data-theme="dark"] {
	--cw-color-primary: #2dd4bf;
	--cw-color-primary-hover: #5eead4;
	/* Dark ink on the bright teal: 8.4:1, versus 1.9:1 for white. */
	--cw-color-on-primary: #04262a;
	--cw-color-secondary: #e5e7eb;
	--cw-color-accent: #2dd4bf;
	--cw-color-heading: #f3f4f6;
	--cw-color-text: #cbd5e1;
	--cw-color-muted: #94a3b8;
	--cw-color-bg: #0f172a;
	--cw-color-card: #1e293b;
	--cw-color-border: #334155;
	--cw-color-editor-bg: #111827;
	--cw-color-editor-text: #f3f4f6;
	--cw-color-warning: #fbbf24;
	--cw-color-warning-bg: #422006;
	--cw-color-success: #34d399;
	--cw-color-danger: #f87171;
	--cw-color-highlight: #78560f;
}