/*
 * Tones: three cool minerals in place of light/dark, all from the
 * Aheliotech palette (brand blue #0088D0, charcoal #484848, accent #3FA9FF).
 *
 *   chalk     paper: cool off-white with a fine fibre crosshatch
 *   slate     mid: blue-grey with fine brushed hairlines and a soft top light
 *   graphite  dark: deep charcoal stone, softly mottled
 *
 * <html data-tone> is set by js/lib/tone.js (and inline in index.html for
 * first paint). Each tone also sets Keystone's data-theme, light for chalk
 * and slate, dark for graphite, and then overrides the semantic tokens.
 * Keystone accents read the blue ramp directly, so each tone remaps it to
 * the brand blue. Textures are pure CSS gradients, no images.
 */

/* ============================================================
   Chalk
   ============================================================ */

:root[data-tone="chalk"] {
  --ks-blue-50:  #EAF5FC;
  --ks-blue-100: #D3EBF8;
  --ks-blue-400: #4FAEE0;
  --ks-blue-600: #0088D0;
  --ks-blue-600-rgb: 0 136 208;
  --ks-blue-700: #0072B0;
  --ks-blue-800: #005E92;
  --ks-blue-900: #004A73;

  --ks-canvas:           #F1F4F7;
  --ks-surface-default:  #FCFDFE;
  --ks-surface-subtle:   #F6F8FA;
  --ks-surface-muted:    #E9EDF1;
  --ks-surface-emphasis: #DCE2E8;
  --ks-surface-overlay:  rgba(20, 28, 36, 0.45);
  --ks-surface-sheen:    none;
  --ks-canvas-wash:      none;

  --ks-text-default:     #22262B;
  --ks-text-muted:       #56616D;
  --ks-text-subtle:      #808B97;
  --ks-text-disabled:    #B4BCC4;
  --ks-text-inverse:     #FCFDFE;
  --ks-text-link:        #0068A3;
  --ks-text-link-hover:  #004A73;
  --ks-text-on-brand:    #FFFFFF;

  --ks-border-default:   #D5DCE3;
  --ks-border-muted:     #E5EAEF;
  --ks-border-emphasis:  #BFC8D1;
  --ks-border-focus:     #0072B0;
  --ks-border-brand:     #0072B0;

  --ks-brand-primary:        #0072B0;
  --ks-brand-primary-hover:  #005E92;
  --ks-brand-primary-active: #004A73;
  --ks-brand-primary-subtle: rgba(0, 136, 208, 0.09);
  --ks-brand-primary-muted:  rgba(0, 136, 208, 0.16);

  --ks-shadow-color: 30 40 52;
  --ks-grain-ink:    30 40 52;
  --ks-glow-focus:   0 0 0 2px var(--ks-surface-default), 0 0 0 4px var(--ks-border-focus);

  --tone-texture:
    repeating-linear-gradient(0deg, rgb(60 80 100 / 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(60 80 100 / 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.6), transparent 70%);
  --tone-nav:   #22272D;
  --tone-hero:  linear-gradient(120deg, #22272D 0%, #1D3A52 70%, #005E92 140%);
}

/* ============================================================
   Slate
   ============================================================ */

:root[data-tone="slate"] {
  --ks-blue-50:  #DCE7F0;
  --ks-blue-100: #C7D9E7;
  --ks-blue-400: #3090C8;
  --ks-blue-600: #0072B0;
  --ks-blue-600-rgb: 0 114 176;
  --ks-blue-700: #005E92;
  --ks-blue-800: #004E7A;
  --ks-blue-900: #003F63;

  --ks-canvas:           #A7B2BD;
  --ks-surface-default:  #C6CED6;
  --ks-surface-subtle:   #BBC4CD;
  --ks-surface-muted:    #B0BAC4;
  --ks-surface-emphasis: #A2ADB8;
  --ks-surface-overlay:  rgba(15, 20, 26, 0.5);
  --ks-surface-sheen:    none;
  --ks-canvas-wash:      none;

  --ks-text-default:     #14181D;
  --ks-text-muted:       #323B45;
  --ks-text-subtle:      #4B5662;
  --ks-text-disabled:    #75818D;
  --ks-text-inverse:     #F1F4F7;
  --ks-text-link:        #00466E;
  --ks-text-link-hover:  #002F4B;
  --ks-text-on-brand:    #FFFFFF;

  --ks-border-default:   #8C98A5;
  --ks-border-muted:     #A0ACB8;
  --ks-border-emphasis:  #74818E;
  --ks-border-focus:     #005E92;
  --ks-border-brand:     #005E92;

  --ks-brand-primary:        #005E92;
  --ks-brand-primary-hover:  #004E7A;
  --ks-brand-primary-active: #003F63;
  --ks-brand-primary-subtle: rgba(0, 94, 146, 0.13);
  --ks-brand-primary-muted:  rgba(0, 94, 146, 0.22);

  --ks-shadow-color: 15 22 30;
  --ks-grain-ink:    15 22 30;
  --ks-glow-focus:   0 0 0 2px var(--ks-surface-default), 0 0 0 4px var(--ks-border-focus);

  --tone-texture:
    repeating-linear-gradient(0deg,
      rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px,
      rgb(15 25 35 / 0.035) 3px 4px, transparent 4px 7px),
    radial-gradient(90% 60% at 50% 0%, rgb(255 255 255 / 0.16), transparent 70%);
  --tone-nav:   #1E242A;
  --tone-hero:  linear-gradient(120deg, #1E242A 0%, #1A3549 70%, #004E7A 140%);
}

/* ============================================================
   Graphite
   ============================================================ */

:root[data-tone="graphite"] {
  --ks-blue-50:  #0E2230;
  --ks-blue-100: #12324A;
  --ks-blue-400: #3FA9FF;
  --ks-blue-600: #0088D0;
  --ks-blue-600-rgb: 0 136 208;
  --ks-blue-700: #0076B6;
  --ks-blue-800: #00649A;
  --ks-blue-900: #00507C;

  --ks-canvas:           #13161A;
  --ks-surface-default:  #1B1F24;
  --ks-surface-subtle:   #171A1E;
  --ks-surface-muted:    #22272D;
  --ks-surface-emphasis: #2B3137;
  --ks-surface-overlay:  rgba(0, 0, 0, 0.6);
  --ks-surface-sheen:    none;
  --ks-canvas-wash:      none;

  --ks-text-default:     #E6EAEE;
  --ks-text-muted:       #A0AAB4;
  --ks-text-subtle:      #727E8A;
  --ks-text-disabled:    #4E5761;
  --ks-text-inverse:     #13161A;
  --ks-text-link:        #3FA9FF;
  --ks-text-link-hover:  #7CC4FF;
  --ks-text-on-brand:    #FFFFFF;

  --ks-border-default:   #323940;
  --ks-border-muted:     #262B31;
  --ks-border-emphasis:  #434B54;
  --ks-border-focus:     #3FA9FF;
  --ks-border-brand:     #0088D0;

  --ks-brand-primary:        #0076B6;
  --ks-brand-primary-hover:  #0088D0;
  --ks-brand-primary-active: #00649A;
  --ks-brand-primary-subtle: rgba(63, 169, 255, 0.12);
  --ks-brand-primary-muted:  rgba(63, 169, 255, 0.22);

  --ks-shadow-color: 0 0 0;
  --ks-grain-ink:    220 235 250;
  --ks-glow-focus:   0 0 0 2px var(--ks-surface-default), 0 0 0 4px var(--ks-border-focus);

  /* stone: broad, soft clouds of lighter and darker charcoal, tiled at
     large mismatched sizes so no pattern shows; Keystone's grain adds
     the fine surface on top */
  --tone-texture:
    radial-gradient(38% 30% at 28% 35%, rgb(255 255 255 / 0.028), transparent 75%) 0 0 / 997px 743px,
    radial-gradient(42% 36% at 72% 64%, rgb(0 0 0 / 0.22), transparent 75%) 0 0 / 761px 911px,
    radial-gradient(30% 40% at 55% 25%, rgb(140 170 200 / 0.03), transparent 75%) 0 0 / 1193px 857px,
    radial-gradient(45% 35% at 18% 78%, rgb(0 0 0 / 0.16), transparent 75%) 0 0 / 1361px 1049px,
    radial-gradient(100% 70% at 50% 0%, rgb(63 169 255 / 0.05), transparent 70%);
  --tone-nav:   #0D0F12;
  --tone-hero:  linear-gradient(120deg, #111418 0%, #12273A 70%, #00507C 140%);
}

/* ============================================================
   Applying the tone
   ============================================================ */

/* The texture sits on the canvas; surfaces above it stay flat. */
:root[data-tone] body,
:root[data-tone] #app #page-container {
  background: var(--tone-texture), var(--ks-canvas);
  background-color: var(--ks-canvas);
}

/* Legacy app tokens follow the tone. */
:root[data-tone] {
  --tone-nav-accent: #3FA9FF;
  --color-primary: var(--ks-text-link);
  --color-secondary: var(--ks-text-muted);
  --color-text: var(--ks-text-default);
  --color-border: var(--ks-border-default);
}

/* Navigation rail: charcoal in every tone, brand-blue accent */
:root[data-tone] #app #app-menu { background: var(--tone-nav); }

:root[data-tone] #app .ks-nav-link i { color: rgb(255 255 255 / 0.55); filter: none; }
:root[data-tone] #app .ks-nav-link:hover i,
:root[data-tone] #app .ks-nav-link.active i { color: var(--tone-nav-accent); }

:root[data-tone] #app .ks-nav-link.active {
  background: rgb(63 169 255 / 0.10);
  box-shadow: inset 3px 0 0 var(--tone-nav-accent);
}

/* ============================================================
   Sign-in page: brand header on the left, the tone's canvas on the
   right (Keystone's grain stays on top), the form on a surface panel
   ============================================================ */

:root[data-tone] #app div#left {
  background: var(--tone-hero);
}

:root[data-tone] #app div#right {
  background: var(--tone-texture), var(--ks-canvas);
  background-color: var(--ks-canvas);
}

:root[data-tone] #app #right .form-container {
  width: min(30rem, 100%);
  box-sizing: border-box;
  padding: 2rem 2.25rem;
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-md), var(--ks-edge-soft);
  color: var(--ks-text-default);
}

:root[data-tone] #app #right .form-container p,
:root[data-tone] #app #right .form-container small { color: var(--ks-text-muted); }

/* ============================================================
   Tone picker: four small swatches at the foot of the menu
   ============================================================ */

#app #app-menu { display: flex; flex-direction: column; }
#app #app-menu .mobile-navigation { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.app-tone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 1.25rem 0.9rem 0.25rem;
}

.app-tone-label {
  margin-right: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
}

.app-tone-swatch {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.app-tone-swatch:hover { opacity: 1; }
.app-tone-swatch:focus-visible { outline: 2px solid var(--tone-nav-accent); outline-offset: 2px; }
.app-tone-swatch[aria-checked="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--tone-nav), 0 0 0 3px var(--tone-nav-accent); }

.app-tone-swatch[data-tone-choice="system"]   { background: linear-gradient(135deg, #F1F4F7 0 50%, #1B1F24 50% 100%); }
.app-tone-swatch[data-tone-choice="chalk"]    { background: #F1F4F7; }
.app-tone-swatch[data-tone-choice="slate"]    { background: #A7B2BD; }
.app-tone-swatch[data-tone-choice="graphite"] { background: #2B3137; }

@media (max-width: 900px) {
  #app .mobile-navigation:not(.is-open) .app-tone { display: none; }

  #app .mobile-navigation.is-open .app-tone {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 32;
    padding: 0.5rem 0.75rem;
  }
}