@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap");
/**
 * Theme: taif
 * Generated by Orbital Compiler
 */

/* ==========================================================================
 * LIGHT MODE
 * ========================================================================== */
[data-theme="taif-light"] {
  /* Colors */
  --color-accent: #a8324f;
  --color-accent-foreground: #fffaf1;
  --color-background: #f7efe1;
  --color-border: #d8c296;
  --color-card: #fffaf1;
  --color-card-foreground: #2a2118;
  --color-error: #b3261e;
  --color-error-foreground: #ffffff;
  --color-foreground: #2a2118;
  --color-info: #3b82f6;
  --color-info-foreground: #ffffff;
  --color-input: #8a6a2e;
  --color-muted: #ecdcc0;
  --color-muted-foreground: #6b5536;
  --color-primary: #0e7c7b;
  --color-primary-foreground: #fffaf1;
  --color-primary-hover: #0a6463;
  --color-ring: #0e7c7b;
  --color-secondary: #1f3f8f;
  --color-secondary-foreground: #fffaf1;
  --color-secondary-hover: #183275;
  --color-success: #12733f;
  --color-success-foreground: #ffffff;
  --color-surface: #f1e5cf;
  --color-warning: #f59e0b;
  --color-warning-foreground: #ffffff;
  --color-surface-hover: #ead9bd;
  --color-border-hover: #0e7c7b;
  --color-placeholder: #7a6746;
  --color-table-header: #ecdcc0;
  --color-table-border: #d8c296;
  --color-table-row-hover: #f3e8d3;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-xl: 16px;

  /* Border Width */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-thin: 1px;

  /* Typography */
  --font-family: "Cairo", sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --font-weight-normal: 400;
  --letter-spacing: 0;
  --line-height: 1.5;

  /* Shadows */
  --shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-main: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 100ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --transition-timing: ease-in-out;

  /* Transforms */
  --active-scale: 0.98;
  --active-translate-y: 1px;
  --hover-scale: 1.02;
  --hover-translate-x: 0;
  --hover-translate-y: -2px;

  /* Focus */
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  /* Icon */
  --icon-color: currentColor;
  --icon-stroke-width: 2;

  /* Type */
  --font-family-display: "Reem Kufi", serif;
  --font-family-body: var(--font-family);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --heading-weight: 700;

  /* Geometry */
  --radius-container: 14px;
  --radius-interactive: 10px;
  --radius-pill: 9999px;
  --corner-shape: round;
  --border-style: solid;
  --border-style-interactive: solid;

}

/* ==========================================================================
 * DARK MODE
 * ========================================================================== */
[data-theme="taif-dark"] {
  /* Colors */
  --color-accent: #e58aa2;
  --color-accent-foreground: #2a0d16;
  --color-background: #101a2e;
  --color-border: #33456b;
  --color-card: #17233c;
  --color-card-foreground: #f1e6cf;
  --color-error: #f2938c;
  --color-error-foreground: #2a0906;
  --color-foreground: #f1e6cf;
  --color-info: #60a5fa;
  --color-info-foreground: #1e3a8a;
  --color-input: #8f9fbf;
  --color-muted: #22314f;
  --color-muted-foreground: #b9ab8c;
  --color-primary: #4fd1c5;
  --color-primary-foreground: #062a2a;
  --color-primary-hover: #7fe0d6;
  --color-ring: #4fd1c5;
  --color-secondary: #8fa8e8;
  --color-secondary-foreground: #0c1730;
  --color-secondary-hover: #b0c2f0;
  --color-success: #6fd39b;
  --color-success-foreground: #06220f;
  --color-surface: #1b2945;
  --color-warning: #fbbf24;
  --color-warning-foreground: #451a03;
  --color-surface-hover: #22314f;
  --color-border-hover: #4fd1c5;
  --color-placeholder: #93a0b8;
  --color-table-header: #22314f;
  --color-table-border: #33456b;
  --color-table-row-hover: #1b2945;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-xl: 16px;

  /* Border Width */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-thin: 1px;

  /* Typography */
  --font-family: "Cairo", sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --font-weight-normal: 400;
  --letter-spacing: 0;
  --line-height: 1.5;

  /* Shadows */
  --shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-main: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 100ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --transition-timing: ease-in-out;

  /* Transforms */
  --active-scale: 0.98;
  --active-translate-y: 1px;
  --hover-scale: 1.02;
  --hover-translate-x: 0;
  --hover-translate-y: -2px;

  /* Focus */
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  /* Icon */
  --icon-color: currentColor;
  --icon-stroke-width: 2;

  /* Type */
  --font-family-display: "Reem Kufi", serif;
  --font-family-body: var(--font-family);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --heading-weight: 700;

  /* Geometry */
  --radius-container: 14px;
  --radius-interactive: 10px;
  --radius-pill: 9999px;
  --corner-shape: round;
  --border-style: solid;
  --border-style-interactive: solid;

}