/*
 * Portal SDK – automatically imports and sets up all fluid required CSS.
 *
 * Import this in your app's main CSS file:
 *   @import "@fluid-app/portal-sdk/globals.css";
 *
 * For package styles without portal theme tokens (e.g. in fluid-admin):
 *   @import "@fluid-app/portal-sdk/packages.css";
 */

/* ── Package CSS imports ─────────────────────────────────────────────────── */
@import "./packages.css";

/* ── Source ──────────────────────────────────────────────────────────────── */
@source "../src/**/*.{ts,tsx}";
/* This is required for the published version */
@source "../dist/**/*.{js,mjs}";

/*
 * Register CSS variables as Tailwind theme values.
 * `inline` means Tailwind won't emit its own --color-* declarations —
 * we define them ourselves in :root below (and the theme engine overrides
 * them at runtime via [data-theme="..."]).
 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius: var(--radius);

  /*
   * Radius scale derived from the single --radius token, so every
   * rounded-* utility (rounded-sm/md/lg/xl/2xl) responds to the theme.
   * Tailwind 4 ships these as fixed pixel defaults; without this block,
   * a tenant theme that sets --radius: 0 (sharp) or --radius: 1.25rem
   * (very round) only affects components that explicitly use --radius,
   * not anything written with the standard rounded-* utilities.
   * rounded-full stays 9999px universally — pills shouldn't change.
   * max(0px, ...) keeps --radius-sm/--radius-md non-negative when a
   * tenant sets --radius: 0; raw calc() would produce -4px / -2px,
   * which is invalid for border-radius and rejected by some tooling.
   */
  --radius-sm: max(0px, calc(var(--radius) - 4px));
  --radius-md: max(0px, calc(var(--radius) - 2px));
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Profile-screen design tokens. Themes can override --profile-*
     in their own data-theme block to re-skin the profile page without
     touching component code. */
  --color-profile-canvas: var(--profile-canvas);
  --color-profile-canvas-elevated: var(--profile-canvas-elevated);
  --color-profile-card: var(--profile-card);
  --color-profile-border: var(--profile-border);
  --color-profile-divider: var(--profile-divider);
  --color-profile-dashed-border: var(--profile-dashed-border);
  --color-profile-pill-hover: var(--profile-pill-hover);
  --color-profile-icon-bg: var(--profile-icon-bg);
  --color-profile-text: var(--profile-text);
  --color-profile-text-muted: var(--profile-text-muted);
  --color-profile-text-faint: var(--profile-text-faint);
  --color-profile-text-placeholder: var(--profile-text-placeholder);
  --color-profile-accent: var(--profile-accent);
  --color-profile-dark: var(--profile-dark);
  --color-profile-dark-hover: var(--profile-dark-hover);
  --color-profile-dark-foreground: var(--profile-dark-foreground);
  --color-profile-danger-bg: var(--profile-danger-bg);
  --color-profile-danger-icon: var(--profile-danger-icon);
  --color-profile-danger-button-bg: var(--profile-danger-button-bg);
  --color-profile-danger-button-text: var(--profile-danger-button-text);
  --color-profile-danger-button-hover: var(--profile-danger-button-hover);

  /* Profile list-screen tokens used by orders + subscriptions list cards.
     Themes can override --profile-card-edge / --profile-danger-* in their
     own data-theme block to re-skin without touching component code.
     Shadow tokens use the `--shadow-*` Tailwind v4 namespace so they
     produce `shadow-profile-card` / `shadow-profile-card-hover` utilities. */
  --color-profile-card-edge: var(--profile-card-edge);
  --color-profile-danger-wash: var(--profile-danger-wash);
  --color-profile-danger-wash-faint: var(--profile-danger-wash-faint);
  --color-profile-danger-edge: var(--profile-danger-edge);
  --color-profile-danger-edge-strong: var(--profile-danger-edge-strong);
  --shadow-profile-card: var(--profile-card-shadow);
  --shadow-profile-card-hover: var(--profile-card-shadow-hover);
  --shadow-profile-danger-card-hover: var(--profile-danger-card-shadow-hover);

  /* Profile type scale (-> text-profile-* utilities). */
  --text-profile-nano: var(--profile-text-nano);
  --text-profile-micro: var(--profile-text-micro);
  --text-profile-2xs: var(--profile-text-2xs);
  --text-profile-2xs-plus: var(--profile-text-2xs-plus);
  --text-profile-xs: var(--profile-text-xs);
  --text-profile-xs-plus: var(--profile-text-xs-plus);
  --text-profile-sm: var(--profile-text-sm);
  --text-profile-sm-plus: var(--profile-text-sm-plus);
  --text-profile-base: var(--profile-text-base);
  --text-profile-md: var(--profile-text-md);
  --text-profile-lg: var(--profile-text-lg);
  --text-profile-hero: var(--profile-text-hero);
  --text-profile-hero-lg: var(--profile-text-hero-lg);

  /* Profile tracking scale (-> tracking-profile-* utilities). */
  --tracking-profile-hero: var(--profile-tracking-hero);
  --tracking-profile-heading: var(--profile-tracking-heading);
  --tracking-profile-tight: var(--profile-tracking-tight);
  --tracking-profile-uppercase-1: var(--profile-tracking-uppercase-1);
  --tracking-profile-uppercase-2: var(--profile-tracking-uppercase-2);
  --tracking-profile-mono: var(--profile-tracking-mono);

  /* Profile layout dimensions. */
  --container-profile-container: var(--profile-container-max);
  --spacing-profile-avatar: var(--profile-avatar-size);
  --spacing-profile-avatar-sm: var(--profile-avatar-size-sm);
  --spacing-profile-mysite-icon: var(--profile-mysite-icon-size);
  --spacing-profile-tile-min-h: var(--profile-tile-min-h);
  --spacing-profile-hero-wash-h: var(--profile-hero-wash-h);
}

/* Light mode fallback tokens (OKLCH format) */
:root {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  /* Canonical default: oklch form of theme-engine defaults.ts primary (#3b82f6). */
  --color-primary: oklch(0.546 0.245 262.881);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-secondary: oklch(0.97 0 0);
  --color-secondary-foreground: oklch(0.205 0 0);
  --color-muted: oklch(0.97 0 0);
  --color-muted-foreground: oklch(0.556 0 0);
  --color-accent: oklch(0.97 0 0);
  --color-accent-foreground: oklch(0.205 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(0.922 0 0);

  /* Short-name aliases (match css-generator globalCSSOverride) */
  --background: var(--color-background);
  --foreground: var(--color-foreground);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-secondary-foreground);
  --muted: var(--color-muted);
  --muted-foreground: var(--color-muted-foreground);
  --accent: var(--color-accent);
  --accent-foreground: var(--color-accent-foreground);
  --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-destructive-foreground);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-primary);
  --radius: 0.625rem;

  /* Popover / Card aliases */
  --popover: var(--color-background);
  --popover-foreground: var(--color-foreground);
  --card: var(--color-background);
  --card-foreground: var(--color-foreground);

  /* Sidebar aliases */
  --sidebar: var(--color-muted);
  --sidebar-foreground: var(--color-muted-foreground);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-primary-foreground);
  --sidebar-accent: var(--color-accent);
  --sidebar-accent-foreground: var(--color-accent-foreground);
  --sidebar-border: var(--color-border);
  --sidebar-ring: var(--color-primary);

  /* Profile-screen tokens. By default they derive from the existing theme
     tokens (--background, --foreground, --border, --primary, etc.) so the
     profile page reflects the active tenant theme out of the box. Themes
     may override individual --profile-* values to fine-tune the look. */
  --profile-canvas: var(--background);
  --profile-canvas-elevated: var(--muted);
  --profile-card: transparent;
  --profile-border: var(--border);
  --profile-divider: var(--border);
  --profile-dashed-border: var(--border);
  --profile-pill-hover: var(--muted);
  --profile-icon-bg: var(--muted);
  --profile-text: var(--foreground);
  --profile-text-muted: var(--muted-foreground);
  --profile-text-faint: color-mix(
    in oklch,
    var(--muted-foreground) 75%,
    transparent
  );
  --profile-text-placeholder: color-mix(
    in oklch,
    var(--muted-foreground) 55%,
    transparent
  );
  --profile-accent: #a87d3c; /* gold — brand accent, not theme-driven */
  --profile-dark: var(--primary);
  --profile-dark-hover: color-mix(in oklch, var(--primary) 88%, black);
  --profile-dark-foreground: var(--primary-foreground);
  --profile-danger-bg: color-mix(
    in oklch,
    var(--destructive) 12%,
    var(--background)
  );
  --profile-danger-icon: var(--destructive);
  --profile-danger-button-bg: color-mix(
    in oklch,
    var(--destructive) 18%,
    var(--background)
  );
  --profile-danger-button-text: var(--destructive);
  --profile-danger-button-hover: color-mix(
    in oklch,
    var(--destructive) 28%,
    var(--background)
  );

  /* Profile list-screen tokens. Theme-derived via color-mix so they shift
     with the active tenant theme; themes can override individual values
     to fine-tune the list look. */
  --profile-card-edge: color-mix(in oklch, var(--foreground) 6%, transparent);
  --profile-card-shadow: 0px 2px 8px color-mix(in oklch, black 6%, transparent);
  --profile-card-shadow-hover: 0px 8px 24px
    color-mix(in oklch, black 8%, transparent);
  --profile-danger-wash: color-mix(
    in oklch,
    var(--destructive) 12%,
    transparent
  );
  --profile-danger-wash-faint: color-mix(
    in oklch,
    var(--destructive) 3%,
    transparent
  );
  --profile-danger-edge: color-mix(
    in oklch,
    var(--destructive) 18%,
    transparent
  );
  --profile-danger-edge-strong: color-mix(
    in oklch,
    var(--destructive) 30%,
    transparent
  );
  --profile-danger-card-shadow-hover: 0px 8px 24px
    color-mix(in oklch, var(--destructive) 10%, transparent);

  /* Type scale (px values from spec). */
  --profile-text-nano: 0.5rem; /* 8px  — credit-card cardholder/expires labels */
  --profile-text-micro: 0.5625rem; /* 9px  — card brand labels */
  --profile-text-2xs: 0.625rem; /* 10px — uppercase row labels */
  --profile-text-2xs-plus: 0.65625rem; /* 10.5px — add-tile sub-label */
  --profile-text-xs: 0.6875rem; /* 11px — pill button text */
  --profile-text-xs-plus: 0.71875rem; /* 11.5px — hero pts pill, card meta */
  --profile-text-sm: 0.75rem; /* 12px — sign-out button, social handle */
  --profile-text-sm-plus: 0.78125rem; /* 12.5px — hero email, address line */
  --profile-text-base: 0.8125rem; /* 13px — card titles, mysite url */
  --profile-text-md: 0.875rem; /* 14px — field values */
  --profile-text-lg: 0.9375rem; /* 15px — section heading */
  --profile-text-hero: 1.25rem; /* 20px — hero name (mobile) */
  --profile-text-hero-lg: 1.4375rem; /* 23px — hero name (md+) */

  /* Tracking (letter-spacing) scale. */
  --profile-tracking-hero: -0.018em;
  --profile-tracking-heading: -0.012em;
  --profile-tracking-tight: -0.01em;
  --profile-tracking-uppercase-1: 0.14em;
  --profile-tracking-uppercase-2: 0.18em;
  --profile-tracking-mono: 0.04em;

  /* Layout dimensions (container, avatar, special heights). */
  --profile-container-max: 57.5rem; /* 920px */
  --profile-avatar-size: 3.25rem; /* 52px md+ */
  --profile-avatar-size-sm: 3rem; /* 48px mobile */
  --profile-mysite-icon-size: 2.75rem; /* 44px */
  --profile-tile-min-h: 9.25rem; /* 148px */
  --profile-hero-wash-h: 16.25rem; /* 260px */
}

/*
 * Dark-mode fallback tokens.
 * Applied when the user toggles dark mode but no API theme is loaded.
 * The theme engine will override these with richer palette-derived values
 * once a theme is fetched from the API.
 */
[data-theme-mode="dark"] {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);
  --color-secondary: oklch(0.215 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.215 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-accent: oklch(0.215 0 0);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(0.3 0 0);

  --background: var(--color-background);
  --foreground: var(--color-foreground);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-secondary-foreground);
  --muted: var(--color-muted);
  --muted-foreground: var(--color-muted-foreground);
  --accent: var(--color-accent);
  --accent-foreground: var(--color-accent-foreground);
  --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-destructive-foreground);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-primary);

  --popover: var(--color-background);
  --popover-foreground: var(--color-foreground);
  --card: var(--color-background);
  --card-foreground: var(--color-foreground);

  --sidebar: var(--color-muted);
  --sidebar-foreground: var(--color-muted-foreground);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-primary-foreground);
  --sidebar-accent: var(--color-accent);
  --sidebar-accent-foreground: var(--color-accent-foreground);
  --sidebar-border: var(--color-border);
  --sidebar-ring: var(--color-primary);

  /* Profile-screen tokens (dark-mode overrides). Same theme-derived
     defaults as light mode — they pick up the dark theme tokens
     automatically. Only the gold accent shifts to a brighter shade. */
  --profile-canvas: var(--background);
  --profile-canvas-elevated: var(--muted);
  --profile-card: transparent;
  --profile-border: var(--border);
  --profile-divider: var(--border);
  --profile-dashed-border: var(--border);
  --profile-pill-hover: var(--muted);
  --profile-icon-bg: var(--muted);
  --profile-text: var(--foreground);
  --profile-text-muted: var(--muted-foreground);
  --profile-text-faint: color-mix(
    in oklch,
    var(--muted-foreground) 75%,
    transparent
  );
  --profile-text-placeholder: color-mix(
    in oklch,
    var(--muted-foreground) 55%,
    transparent
  );
  --profile-accent: #c29a52; /* slightly brighter gold for dark surface */
  --profile-dark: var(--primary);
  --profile-dark-hover: color-mix(in oklch, var(--primary) 88%, white);
  --profile-dark-foreground: var(--primary-foreground);
  --profile-danger-bg: color-mix(
    in oklch,
    var(--destructive) 18%,
    var(--background)
  );
  --profile-danger-icon: var(--destructive);
  --profile-danger-button-bg: color-mix(
    in oklch,
    var(--destructive) 28%,
    var(--background)
  );
  --profile-danger-button-text: var(--destructive);
  --profile-danger-button-hover: color-mix(
    in oklch,
    var(--destructive) 40%,
    var(--background)
  );
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Hide scrollbars while preserving scroll functionality */
@layer utilities {
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}
