/*
 * Cmsmart Design Tokens — single source of truth
 * Additive layer: defines variables only. Loaded before custom.css / template.css.
 * See PLAN-Design-Tokens.md for taxonomy and old->token mapping.
 *
 * Philosophy (live legacy site, minimise disruption):
 *  - COLOR tokens CONSOLIDATE near-duplicates (intended visible cleanup) -> verify on staff.
 *  - DIMENSION tokens (spacing/radius/font-size) are mostly ZERO-SHIFT: keep real
 *    values, only snap imperceptible +/-1px cases. High-volume +/-2..4px values are
 *    kept as exact value-named tokens to be consolidated later.
 *  - line-height: px values are skipped by the codemod (need paired font-size);
 *    only %/unitless are tokenised.
 *  - NOTE: CSS variables do NOT work inside @media — breakpoints are documented
 *    constants for manual standardisation (T8), not usable as var().
 */
:root{
  /* ===================== COLOR (consolidating) ===================== */
  /* brand — modern orange ramp (refreshed; recognisably Cmsmart) */
  --c-brand-400:#fb923c;
  --c-brand-500:#f97316;
  --c-brand-600:#ea580c;
  --c-gold:#ffd700;            /* bright gold, distinct from brand orange */
  /* accent — gom blues/cyans */
  --c-accent-500:#3598dc;
  --c-accent-600:#2b7cc0;
  --c-cyan:#23d3e6;            /* bright teal-cyan, kept separate */
  /* ink / text */
  --c-ink-900:#222;
  --c-ink-700:#444;
  --c-ink-500:#666;
  --c-ink-300:#595959;        /* WCAG AA: #767676 was 4.1:1 (fail) -> #595959 ~7:1 on white */
  /* surface & line */
  --c-surface-0:#fff;
  --c-surface-50:#f7f7f7;
  --c-line:#e1e1e1;
  /* semantic foreground (replace Bootstrap 2 alert colors) */
  --c-success:#2e7d32;
  --c-danger:#c62828;
  --c-warning:#c09853;
  --c-info:#3a87ad;
  /* password-strength ramp — aliases to the state colours (no new hex) */
  --c-pw-weak:var(--c-danger);
  --c-pw-fair:var(--c-warning);
  --c-pw-good:var(--c-brand-500);
  --c-pw-strong:var(--c-success);
  /* semantic tint backgrounds (Bootstrap-style alert bg/border) */
  --c-success-bg:#dff0d8;
  --c-danger-bg:#f2dede;
  --c-warning-bg:#fcf8e3;
  --c-info-bg:#d9edf7;
  /* state borders (complete the fg/-bg/-border triad) */
  --c-success-border:#bcdcb4;
  --c-danger-border:#e6b8b8;
  --c-warning-border:#ecdca0;
  --c-info-border:#a9d4e8;

  /* ===================== RAMP EXTENSIONS (v2 — full tonal scales) =====================
   * Additive: existing brand-400/500/600 & accent-500/600 retained as the anchors.
   * Use these for tints, hovers, borders, and state surfaces instead of new hex. */
  /* brand orange (anchors 400/500/600 match above) */
  --c-brand-50:#fff7ed;  --c-brand-100:#ffedd5; --c-brand-200:#fed7aa; --c-brand-300:#fdba74;
  --c-brand-700:#c2410c; --c-brand-800:#9a3412; --c-brand-900:#7c2d12;
  /* accent blue (anchors 500/600 match above) */
  --c-accent-50:#ecf6fd;  --c-accent-100:#cfe8fa; --c-accent-200:#a5d2f3; --c-accent-300:#6bb6e8;
  --c-accent-400:#4aa6e0; --c-accent-700:#226199; --c-accent-800:#1b4d79; --c-accent-900:#163e61;
  /* neutral/gray (coherent scale; --c-ink-* kept as legacy aliases above) */
  --c-neutral-50:#f7f7f7;  --c-neutral-100:#ececec; --c-neutral-200:#e1e1e1; --c-neutral-300:#cfcfcf;
  --c-neutral-400:#9a9a9a; --c-neutral-500:#6b6b6b; --c-neutral-600:#595959; --c-neutral-700:#444;
  --c-neutral-800:#333;    --c-neutral-900:#222;
  /* extra surfaces (card vs section vs sunken) */
  --c-surface-100:#f0f0f0; --c-surface-200:#e8e8e8;
  /* adopt the orphan teal #04b591 (37x hardcoded) as an official token */
  --c-teal-500:#04b591; --c-teal-600:#039478;
  /* bright cyan (demo "Visit Demo" badges on solution/landing views) */
  --c-cyan-500:#25bce9; --c-cyan-600:#009ecf;

  /* ===================== NAVY (landing/solution secondary brand) =====================
   * Solution & product-landing views use a dark navy as a STRUCTURAL section background
   * (#who-use, .solution-keyfeature dark bands, footer blocks) + accents. The template
   * layer consolidated its small navy ACCENTS into --c-accent-600; landing pages keep a
   * named navy ramp so the large dark sections stay visually identical (zero-shift). */
  --c-navy-500:#1d3c70;   /* canonical (absorbs #1d3b6f / #1d3c6e typo-dupes) */
  --c-navy-600:#163a5f;   /* darker hover */
  --c-navy-400:#3e62a2;   /* media-block headings */
  --c-navy-300:#496ba7;   /* list-check icons / mid accents */
  --c-navy-200:#718dbc;   /* nav links on navy */

  /* ===================== EXTERNAL BRAND COLORS (project detail buttons) ===================== */
  --c-brand-whatsapp:#29D265;     /* WhatsApp official green */
  --c-brand-facebook:#2855A8;     /* Facebook brand blue (vendor card CTA) */
  --c-premium-500:#FFBC00;        /* Premium-member badge yellow (project sidebar header) */

  /* ===================== RATING SCALE (5-star → 1-star bar colors) ===================== */
  --c-rating-5:#33A6FF;
  --c-rating-4:#037FD7;
  --c-rating-3:#0042B6;
  --c-rating-2:#001960;
  --c-rating-1:#A5A5A5;

  /* ===================== TYPOGRAPHY ===================== */
  --font-base:Roboto,system-ui,Arial,sans-serif;          /* body / UI text */
  --font-heading:'Poppins',Roboto,system-ui,Arial,sans-serif; /* h1-h4 / titles */
  --font-mono:Menlo,Monaco,Consolas,'Courier New',monospace;  /* code */
  /* font-size — value-named, zero/+-1px snaps (10->11,13->12,15->14,22->24,32->30) */
  --fs-11:11px; --fs-12:12px; --fs-14:14px; --fs-16:16px;
  --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-40:40px;
  /* display/hero scale — value-named, ZERO-SHIFT (hero titles, big prices, 404
   * numerals, pricing amounts, big icon glyphs). Never let the codemod shrink a
   * hero: each token holds the real px so appearance is preserved exactly. */
  --fs-42:42px; --fs-45:45px; --fs-48:48px; --fs-50:50px; --fs-52:52px;
  --fs-56:56px; --fs-60:60px; --fs-66:66px; --fs-72:72px; --fs-90:90px;
  --fs-108:108px; --fs-120:120px; --fs-150:150px; --fs-180:180px; --fs-189:189px;
  /* weight (gom 9 -> 4; keywords map too: bold->700, normal->400) */
  --fw-light:300; --fw-normal:400; --fw-semibold:600; --fw-bold:700;
  /* line-height — only %/unitless are tokenised; px skipped by codemod */
  --lh-tight:1.2; --lh-base:1.5; --lh-loose:1.7;

  /* ===================== SPACING (value-named, zero-shift) =====================
   * Snap only imperceptible odd values: 3->4, 5->4, 6->8, 7->8, 25->24.
   * Keep high-volume round values exact (10,15,30) to avoid layout shift. */
  --sp-4:4px;  --sp-8:8px;  --sp-10:10px; --sp-12:12px; --sp-15:15px;
  --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-30:30px; --sp-32:32px;
  --sp-40:40px; --sp-48:48px; --sp-60:60px; --sp-64:64px; --sp-80:80px; --sp-96:96px;

  /* Section rhythm + container — fluid landing-page vertical scale.
   * --sp-section : top/bottom padding for major landing sections (hero band, feature band, ...).
   *                clamp ramps from 48px on mobile to 96px on wide screens — replaces ad-hoc
   *                "60px / 80px / 100px" hand-tuned values in landing/solution CSS.
   * --sp-section-tight : a calmer variant for chained sections that already have card padding. */
  --sp-section:clamp(48px, 8vw, 96px);
  --sp-section-tight:clamp(32px, 5vw, 64px);

  /* --container-max : text-heavy container cap (matches Bootstrap-3 1170 + a touch of breathing room).
   *                   Use on .cm-narrow / solution narrow blocks; do NOT apply to full-bleed heroes. */
  --container-max:1200px;

  /* ===================== RADIUS (value-named, zero-shift) =====================
   * Snap only 3->4, 5->4. Keep 8,10,12,16,20 exact. */
  --r-2:2px; --r-4:4px; --r-8:8px; --r-10:10px; --r-12:12px;
  --r-16:16px; --r-20:20px; --r-pill:999px; --r-circle:50%;

  /* ===================== ELEVATION / SHADOW (gom 58 -> token set) =====================
   * One coherent DOWN-elevation ramp (0..4) + named special-purpose shadows.
   * Pick by elevation intent, not by copy-pasting rgba. Never hardcode a box-shadow. */
  /* down-elevation ramp (resting -> floating) */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.10);   /* card / subtle resting */
  --shadow-2:0 4px 16px rgba(0,0,0,.10);                            /* card hover, dropdown, popover */
  --shadow-3:0 12px 32px rgba(0,0,0,.14);                           /* large floating panel */
  --shadow-4:0 8px 32px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.15); /* heavy modal / overlay */
  /* special-purpose (NOT part of the ramp) */
  --shadow-inset:inset 0 2px 4px rgba(0,0,0,.12);                  /* pressed state / sunken well */
  --shadow-glow:0 0 10px rgba(255,255,255,.3);                     /* white glow highlight (on dark UI) */
  --shadow-up:0 -4px 16px rgba(0,0,0,.10);                         /* upward (sticky bar / footer top edge) */
  --shadow-up-lg:0 -8px 32px rgba(0,0,0,.3),0 -4px 16px rgba(0,0,0,.2); /* heavy upward (bottom sheet) */
  --shadow-card-material:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); /* legacy Material card shadow, pasted ~10x in landing CSS — prefer --shadow-1/-2 */
  --shadow-focus:0 0 0 3px rgba(249,115,22,.45);   /* brand-tinted focus ring */

  /* ===================== Z-INDEX (global layers only; leave local 1/2/10) ===================== */
  --z-dropdown:1000;   /* 999, 1040 */
  --z-sticky:1100;     /* 99 */
  --z-overlay:1200;    /* 9989, 9998 */
  --z-modal:1300;      /* 9999, 10000, 10001 */
  --z-toast:1400;      /* 99999, 100000, 999999 */

  /* ===================== MOTION (gom; leave >=1s keyframes) ===================== */
  --dur-fast:.15s;
  --dur-base:.4s;      /* dominant current feel (139x) */
  --dur-slow:.6s;
  --ease-standard:cubic-bezier(.4,0,.2,1);

  /* ===================== SEMANTIC ALIASES (intent layer — change once, theme everywhere) ===================== */
  --color-text:var(--c-ink-700);
  --color-text-muted:var(--c-ink-500);
  --color-heading:var(--c-ink-900);
  --color-text-inverse:var(--c-surface-0);
  --color-link:var(--c-accent-600);
  --color-link-hover:var(--c-brand-500);
  --color-bg:var(--c-surface-0);
  --color-surface:var(--c-surface-0);          /* card/raised surface */
  --color-surface-sunken:var(--c-surface-100);  /* wells/inputs bg */
  --color-section:var(--c-surface-50);
  --color-border:var(--c-line);
  --color-border-strong:var(--c-neutral-300);
  --color-primary:var(--c-brand-500);
  --color-primary-hover:var(--c-brand-600);

  /* ===================== COMPONENT TOKENS ===================== */
  --btn-primary-bg:var(--c-brand-500);
  --btn-primary-bg-hover:var(--c-brand-600);
  --btn-primary-text:var(--c-surface-0);
  --btn-radius:var(--r-8);
  --btn-pad-y:var(--sp-12);
  --btn-pad-x:var(--sp-24);
  --btn-min-h:44px;                          /* touch target — WCAG 2.5.5 */
  --btn-secondary-bg:var(--c-surface-0);
  --btn-secondary-text:var(--c-brand-600);
  --btn-secondary-border:var(--c-brand-500);
  --btn-ghost-text:var(--color-text);
  --btn-ghost-hover-bg:var(--c-surface-50);
  /* button state colors (primary repainted — NOT a 4th button type) */
  --btn-danger-bg:var(--c-danger);   --btn-danger-bg-hover:#a31515;
  --btn-success-bg:var(--c-success); --btn-success-bg-hover:#1f5b22;
  --btn-info-bg:var(--c-info);       --btn-info-bg-hover:#2f6d8c;
  --btn-warning-bg:var(--c-warning); --btn-warning-bg-hover:#a47e3c;
  /* label / eyebrow casing */
  --ls-label:.04em;                  /* tracking for UPPERCASE small labels */
  --card-radius:var(--r-12);
  --card-shadow:var(--shadow-1);
  --card-shadow-hover:var(--shadow-2);
  --focus-ring:var(--shadow-focus);
  /* form controls (Phase 1) */
  --input-min-h:44px;
  --input-pad-y:var(--sp-10);
  --input-pad-x:var(--sp-12);
  --input-radius:var(--r-8);
  --input-bg:var(--c-surface-0);
  --input-border:var(--c-line);
  --input-border-focus:var(--c-brand-500);
  --input-placeholder:var(--c-ink-300);
  --input-error:var(--c-danger);
  --input-error-bg:var(--c-danger-bg);
  --measure:68ch;                            /* max readable line length */
  --container-max:1200px;
  --section-gap:var(--sp-60);

  /* ===================== COMMUNITY (component: detail banner) ===================== */
  --c-banner-overlay-from:rgba(15,23,42,.82);   /* dark navy gradient start */
  --c-banner-overlay-to:rgba(30,41,59,.90);     /* dark navy gradient end */
  --c-eyebrow-bg:rgba(249,115,22,.15);          /* brand-orange tinted chip bg */

  /* type scale (v3: SEMANTIC + FLUID via clamp -> no @media needed; min=mobile, max=desktop).
   * Single source for heading hierarchy — views map ROLE (h1..h6/display), never px.
   * Each desktop step ~1.25x the next so the hierarchy reads clearly site-wide.
   * See PROPOSAL-Type-Size-System.md. */
  --text-display:clamp(40px, 6vw, 64px);      /* hero headline */
  --text-display-lg:clamp(56px, 9vw, 96px);   /* big hero / stat */
  --text-display-xl:clamp(72px, 14vw, 160px); /* 404 numeral / giant stat */
  --text-h1:clamp(30px, 4vw + 12px, 44px);
  --text-h2:clamp(25px, 2.4vw + 12px, 34px);
  --text-h3:clamp(21px, 1.4vw + 14px, 27px);  /* widened from 22 to clear H4 */
  --text-h4:clamp(18px, 0.6vw + 14px, 20px);
  --text-h5:16px;                              /* = body, used bold */
  --text-h6:14px;                              /* overline / small heading (often UPPERCASE) */
  --text-body:clamp(15px, 0.4vw + 14px, 16px);   /* up from legacy 14px */
  --text-lead:clamp(16px, 0.6vw + 15px, 18px);
  --lh-heading:1.15;
  --lh-body:1.65;
  --ls-heading:-.01em;
  /* fluid layout rhythm */
  --section-gap-fluid:clamp(40px, 6vw, 80px);
  --container-pad:clamp(16px, 4vw, 24px);

  /* ===================== DROPDOWN / MENU component tokens ===================== */
  --dd-bg:var(--c-surface-0);
  --dd-border:var(--c-line);
  --dd-radius:var(--r-8);
  --dd-shadow:var(--shadow-2);
  --dd-z:var(--z-dropdown);          /* fix: dropdowns were on --z-modal */
  --dd-min-width:220px;
  --dd-pad:var(--sp-8);
  --dd-item-py:var(--sp-8);
  --dd-item-px:var(--sp-16);
  --dd-item-color:var(--color-text);
  --dd-item-hover-bg:var(--c-surface-50);
  --dd-item-hover-fg:var(--c-brand-500);
  --dd-divider:var(--c-line);
  --dd-transition:var(--dur-fast);   /* unify .2/.25/.4 -> .15s */
  --dd-mega-col-gap:var(--sp-40);
  --dd-caret-size:10px;
  /* aliases: retire the parallel --cloodo-* namespace */
  --cloodo-primary:var(--c-brand-500);
  --cloodo-white:var(--c-surface-0);
  --cloodo-body-color:var(--color-text);
  --cloodo-active-bg:var(--c-surface-50);

  /* ===================== ACCENT BADGES (amber/yellow CTA accent — distinct from --c-gold) =====================
   * Service & pricing pages use #FFBC00 for "Featured / Premium / Trusted" strips.
   * --c-gold (#ffd700) is bright legacy gold; amber here is the muted accent badge. */
  --c-amber-500:#FFBC00;
  --c-amber-600:#e0a700;
  --c-amber-50:#fffbeb;
  --c-amber-200:#fde68a;

  /* ===================== BRAND SOCIAL COLORS (own hex; consolidate near-dupes) ===================== */
  --c-wa-green:#29D265;        --c-wa-green-hover:#1eb555;       /* WhatsApp */
  --c-fb-blue:#2855A8;         --c-fb-blue-hover:#1d4188;        /* Facebook */

  /* ===================== STICKY OFFSET (header height — used by service detail sidebar) ===================== */
  --sticky-top-offset:5rem;

  /* ===================== BREAKPOINTS (constants, NOT usable in @media) =====================
   * --bp-sm:480  --bp-md:768  --bp-lg:1024  --bp-xl:1200  --bp-2xl:1440
   * Standardise off-by-one: 1023->1024, 767->768, 991/992->768|1024 by context (T8). */

  /* ===================== COMMUNITY (v2 — namespace + mesh + pill / toc surface) =====================
   * Namespace cho hero & card cộng đồng để khi muốn đổi sắc thái listing/detail
   * không kéo theo các listing-banner khác (service, magento). Mesh overlay
   * (2 radial-gradient mềm) thay nền phẳng; eyebrow lên brand-400 cho AA trên
   * dark; card community = r-16 (matches hero) + ramp shadow 1->2 trên hover. */
  --c-community-hero-from:    var(--c-navy-600);
  --c-community-hero-to:      var(--c-ink-900);
  --c-community-hero-mesh:    radial-gradient(circle at 18% 0%, rgba(249,115,22,.18), transparent 42%),
                              radial-gradient(circle at 82% 100%, rgba(37,188,233,.10), transparent 50%);
  --c-community-eyebrow-bg:   rgba(249,115,22,.18);
  --c-community-eyebrow-fg:   var(--c-brand-400);
  --c-community-stat-divider: rgba(255,255,255,.16);
  --c-community-on-dark:      var(--c-surface-0);
  --c-community-on-dark-muted:rgba(255,255,255,.78);

  --card-community-radius:    var(--r-16);
  --card-community-bg:        var(--c-surface-0);
  --card-community-border:    var(--c-line);
  --card-community-shadow:    var(--shadow-1);
  --card-community-shadow-h:  var(--shadow-2);

  --pill-tag-bg:              var(--c-surface-50);
  --pill-tag-fg:              var(--c-ink-700);
  --pill-tag-bg-active:       var(--c-brand-50);
  --pill-tag-fg-active:       var(--c-brand-700);

  --toc-marker:               var(--c-neutral-300);
  --toc-marker-active:        var(--c-brand-500);
  --toc-line:                 var(--c-line);
}

/* ===================== DARK THEME SCAFFOLD (v2) =====================
 * Inactive by default — only applies when <html data-theme="dark"> is set.
 * Flips the SEMANTIC layer onto the neutral ramp; components that reference
 * --color-* / --color-surface inherit dark automatically. Primitive --c-* and
 * legacy hardcoded colors are NOT covered yet (full dark mode = Phase 4). */
[data-theme="dark"]{
  --color-text:var(--c-neutral-200);
  --color-text-muted:var(--c-neutral-400);
  --color-heading:var(--c-surface-0);
  --color-text-inverse:var(--c-neutral-900);
  --color-link:var(--c-accent-300);
  --color-link-hover:var(--c-brand-400);
  --color-bg:var(--c-neutral-900);
  --color-surface:var(--c-neutral-800);
  --color-surface-sunken:#1a1a1a;
  --color-section:#1a1a1a;
  --color-border:var(--c-neutral-700);
  --color-border-strong:var(--c-neutral-600);
  --input-bg:var(--c-neutral-800);
  --input-border:var(--c-neutral-700);
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
}