/*
 * Pinguo design tokens
 * Brand: Pinguo
 * Domain: Consumer imaging product
 * Style: Restrained, elegant, Apple-inspired
 * Theme mode: light-dark
 * Source language: zh
 * Output language: en
 *
 * Color architecture (two layers):
 *   1. Primitive palette - six categories. brand / background / text / icon
 *      are each a 10-step scale (50 lightest to 900 darkest). state-success and
 *      state-error are functional colors anchored on Apple system colors.
 *      Anchors follow Apple Human Interface Guidelines system colors
 *      (System Blue #007AFF, System Green #34C759, System Red #FF3B30,
 *      system grays / label / background colors).
 *   2. Semantic tokens - :root (light) and .dark map roles onto primitives.
 *      Components and UI kits must only consume the semantic tokens below.
 */

/* @group-priority: brand, background, text, icon, state-success, state-error */

:root {
  
  /* solo-design consumption aliases: explicit prefix for fill-html-head.mjs */
  --apple-background: var(--background, #ffffff);
  --apple-foreground: var(--foreground, #0f172a);
  --apple-card: var(--card, var(--background));
  --apple-card-foreground: var(--card-foreground, var(--foreground));
  --apple-popover: var(--popover, var(--card));
  --apple-popover-foreground: var(--popover-foreground, var(--card-foreground, var(--foreground)));
  --apple-primary: var(--primary, #111827);
  --apple-primary-foreground: var(--primary-foreground, #ffffff);
  --apple-secondary: var(--secondary, var(--muted, var(--card)));
  --apple-secondary-foreground: var(--secondary-foreground, var(--foreground));
  --apple-muted: var(--muted, var(--card));
  --apple-muted-foreground: var(--muted-foreground, var(--foreground));
  --apple-accent: var(--accent, var(--secondary, var(--muted, var(--card))));
  --apple-accent-foreground: var(--accent-foreground, var(--foreground));
  --apple-destructive: var(--destructive, #ef4444);
  --apple-destructive-foreground: var(--destructive-foreground, #ffffff);
  --apple-border: var(--border, currentColor);
  --apple-input: var(--input, var(--border));
  --apple-ring: var(--ring, var(--primary));
  --apple-chart-1: var(--chart-1, var(--primary));
  --apple-chart-2: var(--chart-2, var(--secondary, var(--primary)));
  --apple-chart-3: var(--chart-3, var(--accent, var(--primary)));
  --apple-chart-4: var(--chart-4, var(--muted-foreground, var(--foreground)));
  --apple-chart-5: var(--chart-5, var(--foreground));
  --apple-sidebar: var(--sidebar, var(--background));
  --apple-sidebar-foreground: var(--sidebar-foreground, var(--foreground));
  --apple-sidebar-primary: var(--sidebar-primary, var(--primary));
  --apple-sidebar-primary-foreground: var(--sidebar-primary-foreground, var(--primary-foreground));
  --apple-sidebar-accent: var(--sidebar-accent, var(--accent, var(--muted, var(--card))));
  --apple-sidebar-accent-foreground: var(--sidebar-accent-foreground, var(--accent-foreground, var(--foreground)));

/* ===== PRIMITIVE PALETTE ===== */

  /* brand */
  --brand-50: #e8f2ff;
  --brand-100: #cfe5ff;
  --brand-200: #9fcbff;
  --brand-300: #66abff;
  --brand-400: #2e8dff;
  --brand-500: #007aff; /* @primary */
  --brand-600: #0064d6;
  --brand-700: #004fad;
  --brand-800: #003b82;
  --brand-900: #00275a;

  /* background */
  --background-50: #ffffff;
  --background-100: #f7f7fa;
  --background-200: #f2f2f7;
  --background-300: #e5e5ea;
  --background-400: #d1d1d6;
  --background-500: #aeaeb2;
  --background-600: #8e8e93;
  --background-700: #3a3a3c;
  --background-800: #1c1c1e;
  --background-900: #000000;

  /* text */
  --text-50: #f5f5f7;
  --text-100: #e3e3e8;
  --text-200: #c7c7cc;
  --text-300: #aeaeb2;
  --text-400: #8e8e93;
  --text-500: #6e6e73;
  --text-600: #48484a;
  --text-700: #3c3c43;
  --text-800: #1d1d1f;
  --text-900: #000000;

  /* icon */
  --icon-50: #f5f5f7;
  --icon-100: #e5e5ea;
  --icon-200: #d1d1d6;
  --icon-300: #c7c7cc;
  --icon-400: #aeaeb2;
  --icon-500: #8e8e93;
  --icon-600: #6e6e73;
  --icon-700: #48484a;
  --icon-800: #2c2c2e;
  --icon-900: #1d1d1f;

  /* state-success */
  --state-success: #34c759; /* @primary */
  --state-success-dark: #30d158;
  --state-success-surface: #e9f9ee;
  --state-success-foreground: #ffffff;

  /* state-error */
  --state-error: #ff3b30; /* @primary */
  --state-error-dark: #ff453a;
  --state-error-surface: #ffecea;
  --state-error-foreground: #ffffff;

  /* ===== SEMANTIC ROLES ===== */

  /* semantic */
  --background: var(--background-50);
  --foreground: var(--text-800);
  --card: var(--background-50);
  --card-foreground: var(--text-800);
  --popover: var(--background-50);
  --popover-foreground: var(--text-900);

  --primary: var(--brand-500);
  --primary-foreground: var(--background-50);
  --secondary: var(--background-200);
  --secondary-foreground: var(--text-800);
  --muted: var(--background-200);
  --muted-foreground: var(--text-400);
  --accent: var(--background-100);
  --accent-foreground: var(--text-800);
  --destructive: var(--state-error);
  --destructive-foreground: var(--state-error-foreground);
  --success: var(--state-success);
  --success-foreground: var(--state-success-foreground);
  --border: var(--background-300);
  --input: var(--background-400);
  --ring: var(--brand-500);

  --icon: var(--icon-900);
  --icon-muted: var(--icon-500);

  /* chart */
  --chart-1: var(--state-success);
  --chart-2: var(--brand-500);
  --chart-3: #ff9500;
  --chart-4: #5856d6;
  --chart-5: #af52de;

  /* sidebar */
  --sidebar: var(--background-200);
  --sidebar-foreground: var(--text-800);
  --sidebar-primary: var(--brand-500);
  --sidebar-primary-foreground: var(--background-50);
  --sidebar-accent: var(--background-300);
  --sidebar-accent-foreground: var(--text-800);
  --sidebar-border: var(--background-300);
  --sidebar-ring: var(--brand-500);

  /* TYPOGRAPHY */
  --font-sans: DM Sans, ui-sans-serif, sans-serif, system-ui;
  --font-serif: DM Sans, ui-sans-serif, sans-serif, system-ui;
  --font-mono: JetBrains Mono, monospace;
  --tracking-normal: 0em;

  /* RADIUS */
  --radius: 1.2rem;

  /* SHADOWS */
  --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.04); /* Hairline */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); /* Subtle */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.05); /* Card */
  --shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.05); /* Raised */
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* Card Hover */
  --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.05); /* Float */
  --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.06); /* Overlay */
  --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.12); /* Modal */

  /* SPACING */
  --spacing: 0.24rem;
}

/* ===== SEMANTIC ROLES - dark (primitive palette inherited) ===== */
.dark {
  --background: var(--background-900);
  --foreground: var(--text-50);
  --card: var(--background-800);
  --card-foreground: var(--text-50);
  --popover: var(--background-700);
  --popover-foreground: var(--text-50);

  --primary: var(--brand-400);
  --primary-foreground: var(--background-900);
  --secondary: var(--background-800);
  --secondary-foreground: var(--text-50);
  --muted: var(--background-800);
  --muted-foreground: var(--text-400);
  --accent: var(--background-700);
  --accent-foreground: var(--text-50);
  --destructive: var(--state-error-dark);
  --destructive-foreground: var(--state-error-foreground);
  --success: var(--state-success-dark);
  --success-foreground: var(--state-success-foreground);
  --border: var(--background-700);
  --input: var(--background-700);
  --ring: var(--brand-400);

  --icon: var(--icon-50);
  --icon-muted: var(--icon-500);

  --chart-1: var(--state-success-dark);
  --chart-2: var(--brand-400);
  --chart-3: #ff9f0a;
  --chart-4: #5e5ce6;
  --chart-5: #bf5af2;

  --sidebar: var(--background-800);
  --sidebar-foreground: var(--text-50);
  --sidebar-primary: var(--brand-400);
  --sidebar-primary-foreground: var(--background-900);
  --sidebar-accent: var(--background-700);
  --sidebar-accent-foreground: var(--text-50);
  --sidebar-border: var(--background-700);
  --sidebar-ring: var(--brand-400);

  --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.36), 0 1px 3px -1px rgba(0, 0, 0, 0.36);
  --shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.44), 0 2px 4px -2px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.44);
  --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.60);
}

/* ===== RADIUS ALIASES (project-local shim) ===== */
:root {
  --apple-radius-sm: 0.6rem;
  --apple-radius-md: 1.2rem;
  --apple-radius-lg: 1.6rem;
}