/* ==========================================================================
   PetLucid — Design Tokens
   Apple.com-grade minimalism + Liquid Glass / Glassmorphism
   Kaynak: mobile/constants/colors.ts (iOS sistem paleti) + Inter font
   ========================================================================== */

:root {
  /* --- Base surfaces (light) --- */
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-deep: #eceef1;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #a1a1a6;
  --hairline: rgba(0, 0, 0, 0.08);

  /* --- Accent system (iOS blue) --- */
  --blue: #0071e3;
  --blue-2: #0a84ff;
  --violet: #5e5ce6;
  --teal: #00b4b8;
  --rose: #ff375f;
  --amber: #ff9500;
  --slate: #636366;
  --success: #34c759;

  /* --- Glass tokens --- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(31, 38, 55, 0.08), 0 1px 2px rgba(31,38,55,0.04);
  --glass-blur: 20px;

  /* --- Phone mock frame --- */
  --mock-bg: #ffffff;
  --mock-radius: 34px;

  /* --- Type --- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

  /* --- Radii --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;

  color-scheme: light;
}

html.dark {
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --bg-deep: #0a0a0b;
  --ink: #f5f5f7;
  --ink-soft: #98989d;
  --ink-faint: #6e6e73;
  --hairline: rgba(255, 255, 255, 0.1);

  --blue: #0a84ff;
  --blue-2: #409cff;
  --violet: #7d7aff;
  --teal: #2dd9dc;
  --rose: #ff6482;
  --amber: #ffb340;
  --slate: #98989d;
  --success: #30d158;

  --glass-bg: rgba(28, 28, 30, 0.55);
  --glass-bg-strong: rgba(28, 28, 30, 0.72);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0,0,0,0.3);

  --mock-bg: #000000;

  color-scheme: dark;
}

/* Accent color mapping (used via data-accent attr) */
[data-accent="blue"]   { --accent: var(--blue); --accent-2: var(--blue-2); }
[data-accent="violet"] { --accent: var(--violet); --accent-2: #8b89f5; }
[data-accent="teal"]   { --accent: var(--teal); --accent-2: #33c9cc; }
[data-accent="rose"]   { --accent: var(--rose); --accent-2: #ff6482; }
[data-accent="amber"]  { --accent: var(--amber); --accent-2: #ffb340; }
[data-accent="slate"]  { --accent: var(--slate); --accent-2: #8e8e93; }