/* ============================================================
   Tiiiime — Color tokens
   ------------------------------------------------------------
   Tiiiime is a native macOS app. Its palette IS the Apple system
   palette: a monochrome brand identity (white wordmark on black),
   a single functional accent (system blue), and the eight system
   colors used as per-project accents. Everything else is the
   macOS label/fill/material hierarchy expressed as translucent
   black or white so it composes over any surface.

   :root holds the LIGHT (standard macOS window) theme.
   [data-theme="dark"] holds the dark theme the app ships its
   marketing + onboarding in. Most app chrome supports both.
   ============================================================ */

:root {
  /* ---- Brand (monochrome) ---------------------------------- */
  --brand-black: #000000;   /* app-icon ground, wordmark on light */
  --brand-white: #ffffff;   /* wordmark on the black icon         */

  /* ---- Functional accent (system blue) --------------------- */
  /* The app's AccentColor is display-p3(0,0,1) — a pure, vivid
     blue. On sRGB displays it resolves to macOS systemBlue.      */
  --accent: #007aff;            /* systemBlue, light               */
  --accent-hover: #0a6cff;
  --accent-pressed: #0058d0;
  --accent-tint: rgba(0, 122, 255, 0.12);  /* wash behind icons   */
  --accent-tint-strong: rgba(0, 122, 255, 0.22);
  --on-accent: #ffffff;

  /* ---- System color palette (project accents) -------------- */
  /* SwiftUI's eight semantic colors, light-mode values. A Project
     picks one of these as its accent dot / chart color.          */
  --sys-blue:   #007aff;
  --sys-purple: #af52de;
  --sys-pink:   #ff2d55;
  --sys-red:    #ff3b30;
  --sys-orange: #ff9500;
  --sys-yellow: #ffcc00;
  --sys-green:  #34c759;
  --sys-teal:   #30b0c7;
  --sys-indigo: #5856d6;
  --sys-gray:   #8e8e93;

  /* ---- Label hierarchy (text on light) --------------------- */
  /* macOS labelColor → tertiary. Dynamic blacks at decreasing
     opacity so text sits correctly on any material.             */
  --label:            rgba(0, 0, 0, 0.85);
  --label-secondary:  rgba(0, 0, 0, 0.50);
  --label-tertiary:   rgba(0, 0, 0, 0.26);
  --label-quaternary: rgba(0, 0, 0, 0.14);

  /* ---- Fills (controls, hovers, chips) --------------------- */
  /* macOS systemFill family — translucent so they tint, not cover. */
  --fill:            rgba(0, 0, 0, 0.05);
  --fill-secondary:  rgba(0, 0, 0, 0.08);
  --fill-hover:      rgba(0, 0, 0, 0.06);
  --fill-quaternary: rgba(0, 0, 0, 0.03);

  /* ---- Surfaces -------------------------------------------- */
  --surface-window:  #ececec;   /* windowBackgroundColor          */
  --surface-content: #ffffff;   /* textBackgroundColor — panes    */
  --surface-card:    #ffffff;
  --surface-sidebar: #f4f4f5;   /* translucent vibrancy sidebar   */

  /* ---- Separators ------------------------------------------ */
  --separator:        rgba(0, 0, 0, 0.10);
  --separator-opaque: #d8d8da;

  /* ---- Glass / materials ----------------------------------- */
  /* macOS 26 "Liquid Glass": a translucent layer + backdrop blur.
     Pair --glass with backdrop-filter: var(--glass-blur).        */
  --glass:        rgba(255, 255, 255, 0.60);
  --glass-thin:   rgba(255, 255, 255, 0.45);
  --glass-stroke: rgba(255, 255, 255, 0.55);
  --glass-blur:   saturate(180%) blur(20px); /* @kind other */

  /* ---- Semantic status ------------------------------------- */
  --status-running: var(--sys-green);   /* a live ticking session */
  --status-stop:    var(--sys-red);     /* Stop Session           */
  --status-warn:    var(--sys-orange);  /* budget / billing nudge */
  --status-billing: var(--sys-green);   /* earned amounts         */

  /* ---- AI surface accents (used in onboarding) ------------- */
  --claude-coral: #d97757;   /* Claude brand orange-coral         */
}

/* ============================================================
   DARK THEME — the app's marketing, onboarding and the dark
   menu-bar popover. Deep near-black surfaces, brighter accents.
   ============================================================ */
[data-theme="dark"] {
  --accent: #0a84ff;            /* systemBlue, dark                */
  --accent-hover: #3a9bff;
  --accent-pressed: #0069d9;
  --accent-tint: rgba(10, 132, 255, 0.18);
  --accent-tint-strong: rgba(10, 132, 255, 0.30);
  --on-accent: #ffffff;

  --sys-blue:   #0a84ff;
  --sys-purple: #bf5af2;
  --sys-pink:   #ff375f;
  --sys-red:    #ff453a;
  --sys-orange: #ff9f0a;
  --sys-yellow: #ffd60a;
  --sys-green:  #30d158;
  --sys-teal:   #40c8e0;
  --sys-indigo: #5e5ce6;
  --sys-gray:   #98989d;

  --label:            rgba(255, 255, 255, 0.92);
  --label-secondary:  rgba(255, 255, 255, 0.55);
  --label-tertiary:   rgba(255, 255, 255, 0.25);
  --label-quaternary: rgba(255, 255, 255, 0.10);

  --fill:            rgba(255, 255, 255, 0.08);
  --fill-secondary:  rgba(255, 255, 255, 0.12);
  --fill-hover:      rgba(255, 255, 255, 0.08);
  --fill-quaternary: rgba(255, 255, 255, 0.04);

  --surface-window:  #1e1e1e;
  --surface-content: #1c1c1e;
  --surface-card:    #2c2c2e;
  --surface-sidebar: #232325;

  --separator:        rgba(255, 255, 255, 0.12);
  --separator-opaque: #38383a;

  --glass:        rgba(40, 42, 48, 0.55);
  --glass-thin:   rgba(40, 42, 48, 0.40);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-blur:   saturate(180%) blur(22px); /* @kind other */
}

/* The deep-ink gradient ground used behind onboarding / hero art.
   Apply as a class on a full-bleed element. */
.tiiiime-ink-ground {
  background:
    radial-gradient(120% 90% at 50% -10%, #0c2f63 0%, #06183a 45%, #02060f 100%);
}