/* toolsfor.co — HUB-ONLY design tokens.
   Scope: Homepage directory, cluster pages, and 404.html. */

:root {
  /* Canvas & Surfaces */
  --tf-bg:            #f8fafc;
  --tf-bg-alt:        #f1f5f9;
  --tf-surface:       #ffffff;
  --tf-surface-sunk:  #f8fafc;
  
  /* Ink */
  --tf-ink:           #0f172a;
  --tf-ink-soft:      #475569;
  --tf-ink-faint:     #94a3b8;
  --tf-ink-muted:     #64748b;
  
  /* Borders */
  --tf-line:          #e2e8f0;
  --tf-line-subtle:   #edf2f7;
  --tf-line-strong:   #cbd5e1;

  /* Brand / Primary */
  --tf-brand:         #2563eb;
  --tf-brand-hover:   #1d4ed8;
  --tf-brand-sunk:    #eff6ff;
  --tf-brand-border:  #bfdbfe;
  --tf-brand-text:    #1e40af;

  /* State */
  --tf-ok:            #10b981;
  --tf-warn:          #f59e0b;
  --tf-error:         #ef4444;
  --tf-focus:         #3b82f6;

  /* Typography */
  --tf-font-display:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --tf-font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --tf-font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Radius */
  --tf-radius-sm:     6px;
  --tf-radius:        12px;
  --tf-radius-lg:     18px;
  --tf-radius-full:   9999px;

  /* Modern Layered Shadows */
  --tf-shadow-sm:     0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --tf-shadow-md:     0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --tf-shadow-card:   0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 6px 16px -2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(226, 232, 240, 0.8);
  --tf-shadow-hover:  0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(37, 99, 235, 0.25);
  --tf-shadow-glow:   0 0 24px rgba(37, 99, 235, 0.15);

  --tf-page:          76rem;
}

/* Cluster-specific palette themes matching design-system.md */
[data-cluster="islamic"]       { --tf-accent: #1b4332; --tf-accent-bg: rgba(27, 67, 50, 0.08); --tf-accent-border: rgba(27, 67, 50, 0.22); --tf-accent-text: #1b4332; }
[data-cluster="money"]         { --tf-accent: #7c5312; --tf-accent-bg: rgba(124, 83, 18, 0.08); --tf-accent-border: rgba(124, 83, 18, 0.22); --tf-accent-text: #7c5312; }
[data-cluster="developer"]     { --tf-accent: #1f4e5f; --tf-accent-bg: rgba(31, 78, 95, 0.08); --tf-accent-border: rgba(31, 78, 95, 0.22); --tf-accent-text: #1f4e5f; }
[data-cluster="reference"]     { --tf-accent: #5c4033; --tf-accent-bg: rgba(92, 64, 51, 0.08); --tf-accent-border: rgba(92, 64, 51, 0.22); --tf-accent-text: #5c4033; }
[data-cluster="hobby"]         { --tf-accent: #9c4221; --tf-accent-bg: rgba(156, 66, 33, 0.08); --tf-accent-border: rgba(156, 66, 33, 0.22); --tf-accent-text: #9c4221; }
[data-cluster="health"]        { --tf-accent: #8c2f39; --tf-accent-bg: rgba(140, 47, 57, 0.08); --tf-accent-border: rgba(140, 47, 57, 0.22); --tf-accent-text: #8c2f39; }
[data-cluster="education"]     { --tf-accent: #2c3e6b; --tf-accent-bg: rgba(44, 62, 107, 0.08); --tf-accent-border: rgba(44, 62, 107, 0.22); --tf-accent-text: #2c3e6b; }
[data-cluster="home-diy"]      { --tf-accent: #4a5d23; --tf-accent-bg: rgba(74, 93, 35, 0.08); --tf-accent-border: rgba(74, 93, 35, 0.22); --tf-accent-text: #4a5d23; }
[data-cluster="files-media"]   { --tf-accent: #45356b; --tf-accent-bg: rgba(69, 53, 107, 0.08); --tf-accent-border: rgba(69, 53, 107, 0.22); --tf-accent-text: #45356b; }
[data-cluster="random-fun"]    { --tf-accent: #a03e6f; --tf-accent-bg: rgba(160, 62, 111, 0.08); --tf-accent-border: rgba(160, 62, 111, 0.22); --tf-accent-text: #a03e6f; }
[data-cluster="time-and-date"] { --tf-accent: #37474f; --tf-accent-bg: rgba(55, 71, 79, 0.08); --tf-accent-border: rgba(55, 71, 79, 0.22); --tf-accent-text: #37474f; }
[data-cluster="text-tools"]    { --tf-accent: #55504a; --tf-accent-bg: rgba(85, 80, 74, 0.08); --tf-accent-border: rgba(85, 80, 74, 0.22); --tf-accent-text: #55504a; }
[data-cluster="messaging"]     { --tf-accent: #1d6a5f; --tf-accent-bg: rgba(29, 106, 95, 0.08); --tf-accent-border: rgba(29, 106, 95, 0.22); --tf-accent-text: #1d6a5f; }
[data-cluster="links-qr"]      { --tf-accent: #5e3a87; --tf-accent-bg: rgba(94, 58, 135, 0.08); --tf-accent-border: rgba(94, 58, 135, 0.22); --tf-accent-text: #5e3a87; }
[data-cluster="writing"]       { --tf-accent: #6b2d5c; --tf-accent-bg: rgba(107, 45, 92, 0.08); --tf-accent-border: rgba(107, 45, 92, 0.22); --tf-accent-text: #6b2d5c; }

/* Dark mode cluster accents */
[data-theme="dark"] [data-cluster="islamic"], [data-theme="dark"][data-cluster="islamic"]       { --tf-accent: #4c9a7a; --tf-accent-bg: rgba(76, 154, 122, 0.14); --tf-accent-border: rgba(76, 154, 122, 0.32); --tf-accent-text: #4c9a7a; }
[data-theme="dark"] [data-cluster="money"], [data-theme="dark"][data-cluster="money"]           { --tf-accent: #d19a3c; --tf-accent-bg: rgba(209, 154, 60, 0.14); --tf-accent-border: rgba(209, 154, 60, 0.32); --tf-accent-text: #d19a3c; }
[data-theme="dark"] [data-cluster="developer"], [data-theme="dark"][data-cluster="developer"]   { --tf-accent: #5fa8bf; --tf-accent-bg: rgba(95, 168, 191, 0.14); --tf-accent-border: rgba(95, 168, 191, 0.32); --tf-accent-text: #5fa8bf; }
[data-theme="dark"] [data-cluster="reference"], [data-theme="dark"][data-cluster="reference"]   { --tf-accent: #b08968; --tf-accent-bg: rgba(176, 137, 104, 0.14); --tf-accent-border: rgba(176, 137, 104, 0.32); --tf-accent-text: #b08968; }
[data-theme="dark"] [data-cluster="hobby"], [data-theme="dark"][data-cluster="hobby"]           { --tf-accent: #e08355; --tf-accent-bg: rgba(224, 131, 85, 0.14); --tf-accent-border: rgba(224, 131, 85, 0.32); --tf-accent-text: #e08355; }
[data-theme="dark"] [data-cluster="health"], [data-theme="dark"][data-cluster="health"]         { --tf-accent: #d9737d; --tf-accent-bg: rgba(217, 115, 125, 0.14); --tf-accent-border: rgba(217, 115, 125, 0.32); --tf-accent-text: #d9737d; }
[data-theme="dark"] [data-cluster="education"], [data-theme="dark"][data-cluster="education"]   { --tf-accent: #7d92c9; --tf-accent-bg: rgba(125, 146, 201, 0.14); --tf-accent-border: rgba(125, 146, 201, 0.32); --tf-accent-text: #7d92c9; }
[data-theme="dark"] [data-cluster="home-diy"], [data-theme="dark"][data-cluster="home-diy"]     { --tf-accent: #9bb15e; --tf-accent-bg: rgba(155, 177, 94, 0.14); --tf-accent-border: rgba(155, 177, 94, 0.32); --tf-accent-text: #9bb15e; }
[data-theme="dark"] [data-cluster="files-media"], [data-theme="dark"][data-cluster="files-media"] { --tf-accent: #9683c9; --tf-accent-bg: rgba(150, 131, 201, 0.14); --tf-accent-border: rgba(150, 131, 201, 0.32); --tf-accent-text: #9683c9; }
[data-theme="dark"] [data-cluster="random-fun"], [data-theme="dark"][data-cluster="random-fun"] { --tf-accent: #e07aa8; --tf-accent-bg: rgba(224, 122, 168, 0.14); --tf-accent-border: rgba(224, 122, 168, 0.32); --tf-accent-text: #e07aa8; }
[data-theme="dark"] [data-cluster="time-and-date"], [data-theme="dark"][data-cluster="time-and-date"] { --tf-accent: #90a4ae; --tf-accent-bg: rgba(144, 164, 174, 0.14); --tf-accent-border: rgba(144, 164, 174, 0.32); --tf-accent-text: #90a4ae; }
[data-theme="dark"] [data-cluster="text-tools"], [data-theme="dark"][data-cluster="text-tools"] { --tf-accent: #b3aca3; --tf-accent-bg: rgba(179, 172, 163, 0.14); --tf-accent-border: rgba(179, 172, 163, 0.32); --tf-accent-text: #b3aca3; }
[data-theme="dark"] [data-cluster="messaging"], [data-theme="dark"][data-cluster="messaging"]   { --tf-accent: #4fb3a3; --tf-accent-bg: rgba(79, 179, 163, 0.14); --tf-accent-border: rgba(79, 179, 163, 0.32); --tf-accent-text: #4fb3a3; }
[data-theme="dark"] [data-cluster="links-qr"], [data-theme="dark"][data-cluster="links-qr"]     { --tf-accent: #a586d1; --tf-accent-bg: rgba(165, 134, 209, 0.14); --tf-accent-border: rgba(165, 134, 209, 0.32); --tf-accent-text: #a586d1; }
[data-theme="dark"] [data-cluster="writing"], [data-theme="dark"][data-cluster="writing"]       { --tf-accent: #c079ad; --tf-accent-bg: rgba(192, 121, 173, 0.14); --tf-accent-border: rgba(192, 121, 173, 0.32); --tf-accent-text: #c079ad; }

