/* ============================================================================
   GOOD TOOLS — Design Tokens
   colors_and_type.css

   A self-contained token sheet for the Good Tools brand: a no-login hub of free
   everyday utilities. Clean & friendly, soft rounded cards, bright multicolor
   category icons. Import this file in any HTML mock — it pulls webfonts from
   Google Fonts and exposes both raw tokens and semantic type classes.

   Fonts:
     Rubik    — workhorse UI + text (subtly rounded, friendly, very legible)
     Fredoka  — wordmark + hero display only (warm, rounded, characterful)
     DM Mono  — generated code output, technical labels, kbd
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Raleway:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  /* ---------------------------------------------------------------------------
     FONT FAMILIES
  --------------------------------------------------------------------------- */
  --font-sans:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Raleway', 'Rubik', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* ---------------------------------------------------------------------------
     TYPE SCALE  (consumer hub — comfortable 16px base, not data-dense)
  --------------------------------------------------------------------------- */
  --text-display: 48px;   /* hero only, Fredoka */
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      20px;
  --text-h4:      17px;
  --text-lg:      17px;
  --text-base:    15px;
  --text-sm:      13px;
  --text-xs:      12px;
  --text-2xs:     11px;   /* tile labels, micro caption */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;  /* large display / headings */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;   /* ALL CAPS eyebrows / dividers */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------------------------------------------------------------------------
     NEUTRALS  (cool-leaning gray ramp)
  --------------------------------------------------------------------------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FBFCFD;
  --gray-50:  #F6F7F9;
  --gray-100: #EFF1F4;
  --gray-150: #E7EAEF;
  --gray-200: #DDE1E8;
  --gray-300: #C7CDD7;
  --gray-400: #9AA2B0;
  --gray-500: #6B7480;
  --gray-600: #515962;
  --gray-700: #3A4047;
  --gray-800: #262B31;
  --gray-900: #181B20;
  --gray-950: #0F1115;

  /* ---------------------------------------------------------------------------
     BRAND  — fresh, friendly green ("good")
  --------------------------------------------------------------------------- */
  --brand-50:  #F2EEFF;
  --brand-100: #E2D9FF;
  --brand-200: #CCB8FF;
  --brand-300: #B391FF;
  --brand-400: #9767FF;
  --brand-500: #7B4DFF;   /* core brand */
  --brand-600: #6538E6;   /* buttons / links on white */
  --brand-700: #512BC2;
  --brand-800: #3E219A;
  --brand-900: #2B176C;

  /* ---------------------------------------------------------------------------
     SEMANTIC STATUS
  --------------------------------------------------------------------------- */
  --success: #0E9F6E;
  --success-bg: #E9FBF4;
  --warning: #D89A07;
  --warning-bg: #FFF7DE;
  --danger:  #DC2B3E;
  --danger-bg: #FCE8EA;
  --info:    #2563EB;
  --info-bg: #E8EFFF;

  /* ---------------------------------------------------------------------------
     CATEGORY HUES  — the multicolor system.
     Each category exposes:
       --cat-<name>      glyph / accent color (text-safe on its tint)
       --cat-<name>-bg   soft tile background (light mode)
     Dark-mode overrides live in .dark below.
  --------------------------------------------------------------------------- */
  --cat-blue:      #3B82F6;  --cat-blue-bg:   #EAF2FF;   /* Generators */
  --cat-violet:    #8B5CF6;  --cat-violet-bg: #F3EEFF;   /* Text & writing */
  --cat-pink:      #EC4899;  --cat-pink-bg:   #FFEAF5;   /* Color & design */
  --cat-orange:    #F59E0B;  --cat-orange-bg: #FFF4DE;   /* Converters */
  --cat-amber:     #D89A07;  --cat-amber-bg:  #FFF2CC;   /* Time & date */
  --cat-teal:      #14B8A6;  --cat-teal-bg:   #DFFAF6;   /* Image & media */
  --cat-cyan:      #06B6D4;  --cat-cyan-bg:   #DDF8FF;   /* Web & network */
  --cat-indigo:    #6366F1;  --cat-indigo-bg: #ECECFF;   /* Dev & code */
  --cat-rose:      #F43F5E;  --cat-rose-bg:   #FFE9EE;   /* Security */
  --cat-green:     #22C55E;  --cat-green-bg:  #E6FBEF;   /* Math & calc */
  --cat-slate:     #51606F;  --cat-slate-bg:  #E9EDF2;   /* Misc / utility */

  /* ---------------------------------------------------------------------------
     SEMANTIC SURFACE / TEXT  (light defaults)
  --------------------------------------------------------------------------- */
  --bg:            #F8F6FF;   /* page */
  --bg-subtle:     #F1ECFF;   /* recessed wells, hover fills */
  --surface:       #FFFFFF;   /* cards, sheets, popovers */
  --surface-2:     #FCFAFF;   /* nested surface */
  --surface-hover: #F2F4F7;

  --fg:            #181B20;   /* primary text */
  --fg-muted:      #515962;   /* secondary text */
  --fg-subtle:     #6B7480;   /* tertiary / captions */
  --fg-faint:      #9AA2B0;   /* placeholder / disabled */
  --fg-on-brand:   #FFFFFF;
  --hero-title:    var(--gray-700);

  --border:        #E7EAEF;   /* default hairline */
  --border-strong: #DDE1E8;   /* inputs, stronger dividers */
  --border-subtle: #EFF1F4;   /* nested dividers */

  --accent:        var(--brand-600);
  --accent-hover:  var(--brand-700);
  --accent-soft:   var(--brand-50);
  --ring:          color-mix(in srgb, var(--brand-500) 45%, transparent);

  /* ---------------------------------------------------------------------------
     RADII  (soft & rounded)
  --------------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;   /* buttons, inputs */
  --radius-lg:   14px;   /* icon tiles, chips */
  --radius-xl:   18px;   /* cards */
  --radius-2xl:  24px;   /* hero panels, modals */
  --radius-full: 999px;  /* pills, avatars */

  /* ---------------------------------------------------------------------------
     SHADOWS  (soft, low, friendly — never harsh)
  --------------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(16,21,34,.05);
  --shadow-sm:  0 1px 2px rgba(16,21,34,.05), 0 2px 6px rgba(16,21,34,.04);
  --shadow-md:  0 2px 4px rgba(16,21,34,.05), 0 6px 16px rgba(16,21,34,.07);
  --shadow-lg:  0 8px 24px rgba(16,21,34,.10), 0 2px 6px rgba(16,21,34,.05);
  --shadow-xl:  0 16px 48px rgba(16,21,34,.14), 0 4px 12px rgba(16,21,34,.06);
  /* lift = card hover. ring-accent = focus halo */
  --shadow-lift: 0 10px 28px rgba(16,21,34,.12);
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--brand-500) 35%, transparent);

  /* ---------------------------------------------------------------------------
     SPACING SCALE
  --------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------------------------------------------------------------------
     MOTION
  --------------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ============================================================================
   DARK MODE  — add class="dark" to <html> or any scope.
   ============================================================================ */
.dark {
  color-scheme: dark;
  /* Dark-mode brand ramp (keeps output cards readable on dark surfaces) */
  --brand-50:  #1D1538;
  --brand-100: #2A1F4D;
  --brand-200: #3C2B6C;
  --brand-300: #5A40A0;
  --brand-400: #7D5BD6;
  --brand-500: #9F7DFF;
  --brand-600: #B49BFF;
  --brand-700: #C7B5FF;
  --brand-800: #D8CCFF;
  --brand-900: #E8E1FF;

  --bg:            #0F1115;
  --bg-subtle:     #16191F;
  --surface:       #181C22;
  --surface-2:     #1E232B;
  --surface-hover: #232831;

  --fg:            #F2F4F7;
  --fg-muted:      #AEB6C2;
  --fg-subtle:     #8A929E;
  --fg-faint:      #646C78;
  --fg-on-brand:   #04130C;
  --hero-title:    #CDBCFF;

  --border:        #272D36;
  --border-strong: #333A45;
  --border-subtle: #1F242C;

  --accent:        var(--brand-400);
  --accent-hover:  var(--brand-300);
  --accent-soft:   color-mix(in srgb, var(--brand-500) 16%, transparent);
  --ring:          color-mix(in srgb, var(--brand-400) 55%, transparent);

  /* Category hues: glyph lightens, tile becomes a translucent wash of the hue */
  --cat-blue:      #7FA8FF;  --cat-blue-bg:   color-mix(in srgb, #2563EB 22%, transparent);
  --cat-violet:    #B795F8;  --cat-violet-bg: color-mix(in srgb, #7C3AED 22%, transparent);
  --cat-pink:      #F472B6;  --cat-pink-bg:   color-mix(in srgb, #DB2777 22%, transparent);
  --cat-orange:    #FB923C;  --cat-orange-bg: color-mix(in srgb, #EA580C 22%, transparent);
  --cat-amber:     #ECB44A;  --cat-amber-bg:  color-mix(in srgb, #C2700A 26%, transparent);
  --cat-teal:      #3FD6C4;  --cat-teal-bg:   color-mix(in srgb, #0D9488 24%, transparent);
  --cat-cyan:      #45C2EC;  --cat-cyan-bg:   color-mix(in srgb, #0E7CA8 26%, transparent);
  --cat-indigo:    #8E88F5;  --cat-indigo-bg: color-mix(in srgb, #4F46E5 26%, transparent);
  --cat-rose:      #FB7185;  --cat-rose-bg:   color-mix(in srgb, #E11D48 22%, transparent);
  --cat-green:     #45D08C;  --cat-green-bg:  color-mix(in srgb, #0C8E55 24%, transparent);
  --cat-slate:     #94A1B0;  --cat-slate-bg:  color-mix(in srgb, #51606F 28%, transparent);

  --success-bg: color-mix(in srgb, var(--success) 18%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 20%, transparent);
  --danger-bg:  color-mix(in srgb, var(--danger) 20%, transparent);
  --info-bg:    color-mix(in srgb, var(--info) 20%, transparent);

  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:  0 2px 4px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
  --shadow-lift: 0 10px 28px rgba(0,0,0,.55);
}

/* ============================================================================
   BASE + SEMANTIC TYPE CLASSES
   ============================================================================ */
.gt-root {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background:
    radial-gradient(1200px 500px at 15% -10%, color-mix(in srgb, var(--brand-200) 28%, transparent), transparent 55%),
    radial-gradient(900px 420px at 95% 0%, color-mix(in srgb, var(--cat-cyan) 16%, transparent), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-600, 600);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.t-h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.t-h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.t-lead { font-size: var(--text-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-muted); }
.t-body { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.t-body-sm { font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.t-label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.t-caption { font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-snug); color: var(--fg-subtle); }
.t-tile-label { font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.t-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: -0.01em; }
.t-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* kbd chip */
.t-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg-muted);
  box-shadow: 0 1px 0 var(--border-strong);
}

/* Secondary font utility (Raleway) */
.raleway-secondary {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Shared modern range input styling used across all tool pages */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
  box-shadow: none !important;
  border-color: transparent !important;
}

input[type="range"]:focus-visible {
  outline: none;
  box-shadow: none !important;
  border-color: transparent !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-full);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-500) 28%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-700) 30%, transparent);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.06);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-700) 30%, transparent);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-700) 30%, transparent);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.06);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-700) 30%, transparent);
}

/* Shared modern color picker styling */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

input[type="color"]:hover {
  border-color: color-mix(in srgb, var(--brand-500) 35%, var(--border-strong));
}

input[type="color"]:focus,
input[type="color"]:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring-accent);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: calc(var(--radius-md) - 3px);
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
}